标签：wrap ide 轮播 ogr highlight api str 自动 tle
最近在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); }
这样战胜种种困难，终于完成了这个小小的轮播需求，前端不容易啊！ 希望能帮到有同样需求的朋友！
标签：wrap ide 轮播 ogr highlight api str 自动 tle
原文地址：https://www.cnblogs.com/toggle/p/9618331.html
