解决移动端better-scroll+vue-awesome-swiper,长按拖动触发回弹特效时闪屏

类库环境

vue
better-scroll
vue-awesome-swiper

复现要求

有个支持scroll到边界支持弹性回弹效果的类库,比如better-scroll
轮播图我用的是vue-awesome-swiper

复现该问题的伪代码大致如下

div.wrap
	scroll-div
		swiper

scroll.init 
swiper.init 

这时,如果对scroll-div上下拖动,触发scroll-div的弹性回弹效果.如果你的手指一直不放开,保持弹性效果时,swiper又恰好在自动切换,大概率会发生切换瞬间抖动的情况

要避免这个问题就得在touchstart时禁用swiper的autoplay,并在touchend时恢复

我用的是vue-awesome-swiper,首先通过ref获取到swiper实例,然后根据touch的情况来处理即可

又是一大段vue伪代码

div.wrap
	scroll-div @touchstart="stopSwiper" @touchend="startSwiper" @touchcancel="startSwiper"
		swiper(ref=mySwiper)

scroll.init 
swiper.init 
let pullUpTimer = null;
export default{
///...
  computed: {
    ...mapState(["portalList", "portalTypeList"]),
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods:{
    stopSwiper() {
      pullUpTimer && clearTimeout(pullUpTimer);
      this.swiper.autoplay.stop();
    },
    startSwiper() {
      pullUpTimer && clearTimeout(pullUpTimer);
      pullUpTimer = setTimeout(() => {
        this.swiper.autoplay.start();
      }, 1500);//建议给start加上一定的延迟,防止touch放开后还在回弹时出现轮播
    },
  }
///...
}