Vue怎么使用Swiper

这篇文章主要介绍了Vue怎么使用Swiper的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue怎么使用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;  }    .my-swiper-slide{    height: 300px;    background-color: pink;  }    .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查看效果了

关于“Vue怎么使用Swiper”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue怎么使用Swiper”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。