解決移動端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放開後還在回彈時出現輪播
    },
  }
///...
}