微信小程序之如何禁止swiper滑动、滚动功能

  发布日期:   2019-01-30
  最新修改:   2021-05-08
  阅读次数:   445 次

87af7c87f82f2.png


  • 授人以鱼不如授人以渔,禁止swiper的滑动操作既然官方没有给出响应的api,那么我们可以从其原理触发。

  • swiper的滑动首先肯定是要接收用户的滑动操作行为,如果我们切断其接收滑动操作的能力,理论上也就可以实现我们想要的需求了。

  • swiper有个catchtouchmove的方法,其实捕获swiper-item中的move事件。

  • 此时的你是否已经知道如何实现了呢?

  • 没有错,就是这么简单,我们只需要绑定一个catchtouchmove的事件。在事件中直接return false即可。

  • 代码如下:

    <swiper>
        <swiper-item catchtouchmove="stopTouchMove">
          ...
        </swiper-item>
      </swiper>
  • js文件中代码如下:

      stopTouchMove: function(e) {
        return false;
      },
  • 这虽然时一个很简单的需求,解决方式也是很简单,但是我们需要的是解决问题的思路。结果并不重要,重要的是思考的过程。

  • 感谢您的观看!


   转载规则

《微信小程序之如何禁止swiper滑动、滚动功能字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。