问题:vue-awesome-swiper 按住不松缓慢切换滑动,不触发onSlideChangeStart、onSlideChangeEnd怎么办
近期做一个移动端轮播图,用到了vue-awesome-swiper组件,我用的是swiper3
我想在图片切换之后进行一些数据上的操作,因此需要一个合适的回调api,选择了onSlideChangeStart、onSlideChangeEnd;
但是发现不管是PC端还是移动端,鼠标或者手指按着不松,缓缓向左或向右移动,这两个回调都不会触发,只有快速切换才能触发,不知道是bug还是有什么满足条件才可以,因为不清楚原理,就不细究了。更换一个回调函数onTransitionEnd实现即可。
先把配置粘贴出来再一一说明:
var currentSlide= 0 一个变量,用于记录当前图片索引值
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',//一种切换效果,见官网
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
initialSlide: currentSlide,//本地变量currentSlide默认为0,代表轮播默认显示第几张
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true
},
onInit: function (swiper) {
// Swiper初始化了
console.log('swiper初始化', swiper.activeIndex)
},
onTransitionEnd (swiper) {
console.log('onTransitionEnd ', swiper.activeIndex, currentSlide)
if (swiper.activeIndex == currentSlide) {
console.log('不能更新current')
} else {
currentSlide = swiper.activeIndex
console.log('更新current')
//在这里做你想做的操作
doSomething()
}
}
})
onTransitionEnd这个回调函数,过渡结束时触发,接收Swiper实例作为参数。
我们要的时间节点是:图片切换完成后做一些事情。这个函数只要滑动释放鼠标或者滑动松开手指就会触发,也就是当前如果是第一张,我滑了到了第2张,没松手,再滑回第一张来--松手,图片仍然是第一张的情况下,这个函数也会触发。(正是利用这一点,才能解决慢慢滑走时其他函数不触发,因此不能做操作的问题)
但是我们图片没有切换,我们是不想进行我们的操作的,因此在这个函数触发的时候不要立刻执行你想做的操作,而是增加一个判断条件:(切换了之后swiper.activeIndex一定会更新为新的索引值,而原有的索引值我们记录在了变量currentSlide里,默认是时候是0,一旦切换一次,就要把它重置为新的值,然后进行你的操作。)
if (swiper.activeIndex == currentSlide) {
console.log('不能更新current')
} else {
currentSlide = swiper.activeIndex console.log('更新current') }
}
综上所述,我们就可以随心所欲的再else里进行操作了~