vue-awesome-swiper 按住不松缓慢切换滑动，不触发onSlideChangeStart、onSlideChangeEnd怎么办-----解决方法

问题：vue-awesome-swiper 按住不松缓慢切换滑动，不触发onSlideChangeStart、onSlideChangeEnd怎么办

官网地址：https://3.swiper.com.cn/

近期做一个移动端轮播图，用到了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里进行操作了~