微信小程序swiper禁止用户手动滑动

痛定思痛。 2021-10-19 07:44 507阅读 0赞

用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有解决了有点击按钮不影响使用

wxml

<swiper class='yaohe' vertical='true' circular='true' autoplay="{ {autoplay}}" interval="{ {interval}}" duration="{ {duration}}">
        <block wx:for='{ {yaohe}}'>
          <swiper-item catchtouchmove='catchTouchMove'>   
            <block wx:for='{ {item}}'>
              <view class='yaohe_item'>
                <view class='yaohe_img'>
                  <image src='{ {item.goods_icon}}'></image>
                </view>
                <view class='yaohe_right'>
                  <view class='yaohe_text'>{
       {item.goods_feature}}</view>
                  <view class='boss_price'>
                    <view class='boss'>{
       {item.shop_name}}</view>
                    <view class='price' bindtap='goGoodsDetail' data-shop_goods_id='{ {item.shop_goods_id}}'>￥{
       {item.goods_price}}</view>
                  </view>
                </view>
              </view>
            </block>
          </swiper-item>
        </block>
      </swiper>

重点js

// 截获竖向滑动
      catchTouchMove:function(res){ 
        return false
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，507人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序使用swiper制作左右滑动tabs导航

首先我们先来看一下效果吧 ![20200520152402307.png][] ![20200520152409677.png][] 很简单 wxml <!-

桃扇骨/ 2023年02月10日 05:22/ 0 赞/ 25 阅读

相关微信小程序（5）：swiper滑动轮播组件

文章目录 swiper 滑块视图容器 wiper-item 仅可放置在swiper组件中，宽高自动设置为100% 示例： index.wxml文件代码：

左手的ㄟ右手/ 2022年12月30日 14:55/ 0 赞/ 195 阅读

相关 swiper禁止手动滑动

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6uICDlhYk_size_20_colo

清疚/ 2022年09月15日 14:56/ 0 赞/ 342 阅读

相关微信小程序中，如何禁止手动滑动 swiper 组件？

swiper 组件实现水平滑动切换，有时候只想通过点击按钮切换，需要禁用手动滑动切换。可以用下面的实现方法： wxml：在 swiper-item 增加一个方法 <

╰半夏微凉°/ 2022年05月17日 01:24/ 0 赞/ 346 阅读

相关微信小程序swiper禁止用户手动滑动

用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有解决了有点击按钮不影响使用 wxml <swiper class='y

痛定思痛。/ 2021年10月19日 07:44/ 0 赞/ 508 阅读

相关微信小程序swiper禁止手动滑动

做了个中奖的公告栏滚动不小心就点到滑动，如图 ![在这里插入图片描述][20190816181711409.png] 不符合需求，所以需要禁掉，下面是步骤，想看上

待我称王封你为后i/ 2021年10月18日 05:58/ 0 赞/ 465 阅读

相关微信小程序实现新闻轮播、禁止手动竖向滑动

效果 ![在这里插入图片描述][20201229160257764.gif_pic_left] 图片 ![news.png][] WXML 在 `

迷南。/ 2021年09月07日 05:58/ 0 赞/ 556 阅读

相关微信小程序swiper滑动-仿饿了么

前言：本篇swiper滑动可以根据需要一页显示多少项内容（根据数组渲染的）。除外，还能修改指示点的默认和选中的样式。 -------------------- 饿了么-

古城微笑少年丶/ 2021年07月25日 01:50/ 0 赞/ 493 阅读

相关微信小程序禁止轮播手动滑动

<swiper current="{ {tab_text}}" > <swiper-item catchtouchmove="sto

妖狐艹你老母/ 2021年07月24日 11:12/ 0 赞/ 519 阅读

相关 uni-app 禁止 swiper 手动滑动

我们在使用 uni-app 的滑块视图容器 swiper 时，有时候放入该容器的内容需要左右滑动（如使用 SwipeAction 滑动操作组件），这时就与 swiper ...

朱雀/ 2021年03月29日 11:50/ 1 赞/ 2695 阅读