类库环境
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放开后还在回弹时出现轮播
},
}
///...
}