Vue使用Swiper的案例详解

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查看效果了

来源：https://blog.csdn.net/qq_43137699/article/details/125375095