Vue使用Swiper看这一篇就够了
此案例实现需求
- 完成swiper动态异步数据下的slide渲染
- 自定义分页器样式
- 解决loop:true设置时的事件丢失问题
- swiper鼠标移入/移出 暂停/开始轮播
- 单页面渲染多个swiper组件互不影响
1、引入swiper
npm i swiper@5.2.0
2、创建轮播图组件CarouselContainer.vue，详细解析在代码注释中
<template>
<div class="CarouselContainer" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
<div ref="mySwiper" class="swiper-container" :id="currentIndex" >
<div class="swiper-wrapper">
<div class="swiper-slide my-swiper-slide" v-for="(item,index) of slideList" :key="index">{{item.name}}</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!--导航器-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.css";
export default {
name: 'CarouselContainer',
props: ['slideList','currentIndex'],
data(){
return {
currentSwiper:null,
}
},
watch:{
//slide数据发生变化时,更新swiper
slideList:{
deep:true,
// eslint-disable-next-line
handler(nv,ov){
console.log("数据更新了")
this.updateSwiper()
}
}
},
mounted() {
this.initSwiper()
},
methods:{
//鼠标移入暂停自动播放
stopAutoPlay() {
this.currentSwiper.autoplay.stop()
},
//鼠标移出开始自动播放
startAutoPlay() {
this.currentSwiper.autoplay.start()
},
//初始化swiper
initSwiper(){
// eslint-disable-next-line
let vueComponent=this//获取vue组件实例
//一个页面有多个swiper实例时，为了不互相影响,绑定容器用不同值或变量绑定
this.currentSwiper = new Swiper('#'+this.currentIndex, {
loop: true, // 循环模式选项
autoHeight:'true',//开启自适应高度,容器高度由slide高度决定
//分页器
pagination: {
el: '.swiper-pagination',
clickable:true,//分页器按钮可点击
},
on: {
//此处this为swiper实例
//切换结束获取slide真实下标
slideChangeTransitionEnd: function(){
console.log(vueComponent.$props.currentIndex+"号swiper实例真实下标",this.realIndex)
},
//绑定点击事件,解决loop:true时事件丢失
// eslint-disable-next-line
click: function(event){
console.log("你点击了"+vueComponent.$props.currentIndex+"号swiper组件")
}
},
//导航器
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
//自动播放,不同版本配置方式不同
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
slidesPerView: 1, //视口展示slide数1
slidesPerGroup: 1, //slide数1页一组
})
},
//销毁swiper
destroySwiper(){
try {
this.currentSwiper.destroy(true,false)
}catch (e) {
console.log("删除轮播")
}
},
//更新swiper
updateSwiper(){
this.destroySwiper()
this.$nextTick(()=>{
this.initSwiper()
})
},
},
destroyed() {
this.destroySwiper()
}
}
</script>
<style scoped>
.CarouselContainer{
background-color: gray;
}
/*slide样式*/
.my-swiper-slide{
height: 300px;
background-color: pink;
}
/*swiper容器样式*/
.swiper-container {
width: 700px;
border: 1px solid red;
}
/*自定义分页器按钮被点击选中时的样式*/
/deep/.swiper-pagination-bullet-active{
background-color: #d5a72f !important;
width: 20px;
}
/*自定义分页器按钮常规样式*/
/deep/.swiper-pagination-bullet{
background-color: #9624bf;
opacity: 1;
width: 20px;
}
</style>
3、创建父组件App.vue渲染多个swiper组件、模拟异步数据变化
<template>
<div id="app">
<!--传递不同的currentIndex 作为区分不同swiper组件的动态id-->
<CarouselContainer :slide-list="list" currentIndex="1"></CarouselContainer>
<CarouselContainer :slide-list="list" currentIndex="2"></CarouselContainer>
</div>
</template>
<script>
import CarouselContainer from './components/CarouselContainer.vue'
export default {
name: 'App',
components: {
CarouselContainer,
},
data(){
return{
list:[
{name:"aaa"},
{name:"bbb"},
{name:"ccc"},
]
}
},
mounted() {
let self=this
//延时模拟两次数据变化
setTimeout(()=>{
let obj={name:"ddd"}
self.list.push(obj)
},5000)
setTimeout(()=>{
let obj={name:"eee"}
self.list[0].name="AAA"
self.list.push(obj)
},8000)
}
}
</script>
<style scoped>
</style>
只需要这两个文件就可以vue项目中运行demo查看效果了
