业务场景是vant组件库的Popup弹窗中包裹着vue-awesome-swiper组件,swiper组件中包含better-scroll,轮播swiper是横向滑动的,而better-scroll是纵向滚动。
1.由于vant中的popup弹窗嵌套了better-scroll,导致better-scroll纵向滑动失效,配置一下Popup弹窗的属性即可:
tips:尽量把Popup弹窗挂在到body节点,防止样式错乱。
<van-popup
v-model="show"
get-container="body" // 指定挂载的节点
:lock-scroll="false" // 是否锁定背景滚动
:close-on-click-overlay="false" // 是否在点击遮罩层后关闭
>
2.由于拖动临界值造成滑动失效或达不到预期效果,所以swiper要加如下属性:
swiperOption: {
passiveListeners: false, // 用来提升swiper在移动设备的中的scroll表现(Passive Event Listeners),但是会和e.preventDefault冲突,所以有时候你需要关掉它。
touchAngle: 30, // 允许触发拖动的角度值。默认45度,即使触摸方向不是完全水平也能拖动slide。
threshold: 12, // 拖动的临界值(单位为px),如果触摸距离小于该值滑块不会被拖动。
}
网友评论