欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-29 16:08:37
...

最近在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)" alt="" >
</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);
}

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