美文网首页
关于在vue中使用vue-awesome-swiper和bett

关于在vue中使用vue-awesome-swiper和bett

作者: 忽然之间s | 来源:发表于2020-10-25 10:15 被阅读0次

业务场景是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),如果触摸距离小于该值滑块不会被拖动。
}

相关文章

网友评论

      本文标题:关于在vue中使用vue-awesome-swiper和bett

      本文链接:https://www.haomeiwen.com/subject/phigmktx.html