前脚刚解决了vue中用swiper轮播Loop:true时点击事件失效解决办法 ,后脚又出新问题了,点击事件时获取到的realIndex不准确,导致跳转不正常,
后面又是一通百度,找到个解决方法,虽然不明所以,但是好歹问题是解决了,分享给大家
swiperOption: {
pagination: {
el: ""
},
autoplay: {
disableOnInteraction: false,
delay: 3000 // 3秒切换一次
},
loop: false, // 循环滚动
on: {
click: function() {
// 需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 _this,来调用 methods 里的方法
const realIndex = (this.activeIndex - 1 + _this.bannerList.length) % (_this.bannerList.length);
// console.log((this.activeIndex - 1 + _this.bannerList.length) % (_this.bannerList.length));
_this.toBannerDetail(_this.bannerList[realIndex]);
}
}
},
关键点在于
const realIndex = (this.activeIndex - 1 + _this.bannerList.length) % (_this.bannerList.length);
// _this.bannerList 就是轮播集合