【微信小程序自学之路】swiper禁用滑动

如何实现小程序swiper禁止滑动呢?

小程序swiper

我们先看下swiper滑动代码

1
2
3
4
5
6
7
<swiper current="{{ toView }}" bindchange="changeQuestion">
<block wx:for="{{ questionList }}" wx:key="*this">
<swiper-item>
<question-item question="{{ item }}"></question-item>
</swiper-item>
</block>
</swiper>

有些场景我们想要实现swpier禁止手动滑动,该有点击滑动,这样改如何呢? 这个场景而且很常见

很简单,通过事件 catchtouchmove 就可以完美实现swiper禁止手动滚动了

1
2
3
4
5
6
7
<swiper current="{{ toView }}" bindchange="changeQuestion">
<block wx:for="{{ questionList }}" wx:key="*this">
<swiper-item catchtouchmove="stopTouchMove">
<question-item question="{{ item }}"></question-item>
</swiper-item>
</block>
</swiper>

然后再看看js代码

1
2
3
4
5
...
stopTouchMove: function (e) {
return false;
}
...

给swiper-item添加一个事件,实现组织滑动事件,从而实现了禁止swiper的手动滑动

同样也带来一个问题,stopTouchMove 事件会拦截几乎所有的触摸移动事件,导致页面滚动等等事件也无法响应

坚持原创技术分享,谢谢鼓励我继续创作!