vue使用swiper轮播组件开启loop模式时的问题总结

Posted 2021-01-05 toggle

最近在vue项目中使用了swiper插件来完成轮播功能，没有开启循环模式，一切都很顺利

具体怎么在vue项目中引入swiper插件，这个太简单就不提了，上代码

html

<div class="swiper-container">
       <div class="swiper-wrapper">
          
            <template v-if=‘banner.length > 0‘>
              <div class="swiper-slide" v-for="x in banner" @click="openSeries(x)">
                <img :src="func(x)" alt="" >
              </div>
            </template>

       </div>
       <div class="swiper-pagination"></div>
</div>

script

              $.ajax({
                  url: vm.programListUrl,                  //轮播图
                  data: data,
                  type: "GET",
                  success: function (res) {
                    res = JSON.parse(res);
                    vm.newData = res;
                    //获取banner图
                    vm.banner = vm.newData.list;
  
                    //初始化轮播图
                    vm.swiper = new Swiper(‘.swiper-container‘, {
                      pagination: ‘.swiper-pagination‘,
                      paginationClickable: true,
                      centeredSlides: true,
                      notNextTick: true,
                      autoplay: 5000,
                      autoplayDisableOnInteraction: true,

                      observer: true,       //修改swiper自己或子元素时，自动初始化swiper
                      observeParents: true, //修改swiper的父元素时，自动初始化swiper
                      onSlideChangeStart: function (swiper) {
                        //console.log(swiper.activeIndex)
                      }
                      
                    });

                  },
                  error: function (er) {
                    console.log(er);
                  }
              });

后来产品说轮播部分要和APP一样是无限循环的，那不简单，在初始化轮播的配置里开启一下无限模式不就OK了，loop: true，这不太简单了么，

然而，前端的世界没我想象的那么简单，一系列问题随之而来

▂▂▂▂__▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂_▂▂▂__▂▂▂▂

首先，开启轮播后，当从前到后一张张滑动，到最后一张滑向第一张时，第一张图总是一闪而过，直接就到第二张图了，我勒个去

一百度，原来是因为 在ajax中初始化轮播的问题，在获取数据后数据后要重新初始化一下，这就需要用到vue的$nextTick这个大杀器了，

这样一来，问题被完美的解决了，滑来滑去好顺畅，上代码

 

 

                //初始化轮播图
                vm.swiper = new Swiper(‘.swiper-container‘, {
                      pagination: ‘.swiper-pagination‘,
                      paginationClickable: true,
                      centeredSlides: true,
                      notNextTick: true,
                      //freeMode:true,
                      loop: true,
                      autoplay: 5000,
                      autoplayDisableOnInteraction: true,

                      observer: true,//修改swiper自己或子元素时，自动初始化swiper
                      observeParents: true,//修改swiper的父元素时，自动初始化swiper
                      onSlideChangeStart: function (swiper) {
                        //console.log(swiper.activeIndex)
                      },
                      onClick: function(swiper){
                        var x = JSON.parse(swiper.clickedSlide.attributes["data-href"].nodeValue)
                        //console.log(x );
                        vm.openSeries(x);
                      }
               });

               vm.$nextTick(()=>{
                      vm.swiper.init() // 再初始化swiper
               })

 

 

 

═∞═ ═∞══∞═ ═∞══∞═ ═∞══∞═ ═∞══∞═ ═∞══∞═ ═∞═

然后，点击了一下图片，跳转事件也执行了，可是从最后一张继续滑动到第一张的时候再点击第一张就尴尬了，怎么点都没反应

我突然就想到了，swiper在loop模式下的原理是slides前后会复制若干个slide，从而形成一个环路来实现无缝轮播的，问题就出在这些复制的slide上

它没有复制绑定在dom上的click事件，复制的swiper-slide点击事件无效。

从swiper文档中看到 可以使用onclick回调函数触发点击事件

 入口

那这样就又解决了这个问题，但是我的方法要传当前的item 对象过去，只好在DOM上绑定自定义属性时，将当前的item对象转换为字符串，

在onclick中拿到数据后再转换为对象

上代码

<div class="swiper-slide" v-for="x in banner" :data-href="func_str(x)">
      <img :src="func(x)"  >
</div>

func_str(item){
        return JSON.stringify(item);
},

onClick: function(swiper){
     var x = JSON.parse(swiper.clickedSlide.attributes["data-href"].nodeValue)
     //console.log(x );
     vm.openSeries(x);
}

这样战胜种种困难，终于完成了这个小小的轮播需求，前端不容易啊！ 希望能帮到有同样需求的朋友！