最近在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); }
这样战胜种种困难,终于完成了这个小小的轮播需求,前端不容易啊! 希望能帮到有同样需求的朋友!