swiper不生效/切换不生效，点击切换按钮activeIndex值不对应问题@令狐张豪

最新推荐文章于 2024-09-02 00:05:02 发布

令狐张豪

最新推荐文章于 2024-09-02 00:05:02 发布

阅读量2.8k

点赞数 1

文章标签： vue.js 前端 swiper

本文链接：https://blog.csdn.net/LingHuzh/article/details/131975742

版权

原因：因为把new Swiper放在mounted实例化的时候可能v-for并未执行完成结构还未完全生成

错误：先执行了swiper实例化后循环的；
正确：先循环完数据确保数据完整循环完成后再执行swiper实例化；

解决方案：watch+$nextTick

   data () {
      return {
         payParams: [],  //swiper要循环的数据
         swiperSlideIndex: 1, //课件播放页当前第几个
      }
   },
 watch: {
      payParams (newValue, oldValue) {
         let _this = this;
         this.$nextTick(() => {
            this.mySwiper = new Swiper('.swiper-container', {
               direction: 'horizontal', // 垂直切换选项
               autoplay: false,
               loop: false, // 循环模式选项
               observer: true, //修改swiper自己或子元素时，自动初始化swiper
               observeParents: true, //修改swiper的父元素时，自动初始化swiper
               // 如果需要前进后退按钮
               navigation: {
                  nextEl: '.el-icon-right',
                  prevEl: '.el-icon-back',
               },
               on: {
                  slideChangeTransitionEnd: function () {
                     //页面显示当前第几个
                     _this.swiperSlideIndex = this.activeIndex + 1;
                  },
               }
            })
         })
      }
   },