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

最新推荐文章于 2025-05-19 14:53:27 发布
原创 最新推荐文章于 2025-05-19 14:53:27 发布 · 3.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Swiper-item中禁用竖向滑动功能，避免误操作。通过在swiper-item中添加catchtouchmove='catchTouchMove'属性，并在JS中添加相应代码实现。具体步骤及代码示例可在文中查看。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做了个中奖的公告栏 滚动 不小心就点到滑动，如图

在这里插入图片描述

不符合需求，所以需要禁掉，下面是步骤，想看上面那个怎么做的请移步我的另一篇文章
传送门: https://blog.youkuaiyun.com/AIB_Kasic/article/details/99682428

禁止

  1. 在 swiper-item 中添加 catchtouchmove='catchTouchMove'
  2. 在js 中添加代码↓
// 截获竖向滑动
 catchTouchMove:function(res){
   return false
 },
【微信小程序】禁止swiper手动滑动
weixin_42342065的博客
05-15 887
前言：在开发小程序的消息滚动的时候一般会采用swiper组件，但是这个组件有个问题是在手机上可以手动滚动，这样的效果不是我们想要的。可以通过如下方法进行改善。 代码： index.wxml <swiper class="tab-right" vertical="true" autoplay="auto" interval="3000" circular="true"> <swiper-item class="tab_swiper" wx:for="{{arr}}" wx:ke
微信小程序swiper禁止手动滑动方法
Mystic_a的博客
06-16 2047
用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用手动滑动，又解决了有点击按钮不影响使用 。 以下为wxml文件： <swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:calc(100vh-87rpx)"bindchange="bindChange"> <!--外来人员--> <swiper-itemca...
微信小程序swiper禁止用户滑动
qinnzheng
11-23 6883
小程序swiper
微信小程序轮播图组件Swiper全解析
爱的叹息的专栏
05-19 1328
微信小程序的 swiper 组件用于实现图片或内容的滑动展示，支持多种自定义配置。通过 autoplay、interval、duration 等属性，可以控制自动播放、滑动动画时长等行为。circular 属性实现循环滑动，vertical 支持纵向滑动，bindchange 和 bindtap 分别用于处理滑块切换和点击事件。开发者可以通过 current 属性设置初始显示的滑块，并通过 wx:for 动态绑定数据。swiper 组件的高度需显式设置，且 swiper-item 中的内容应使用固定宽高或
微信小程序swiper禁止用户手动滑动
七夜的博客
03-10 1028
用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有解决了有点击按钮不影响使用。
微信小程序阻止swiper手动滑动的多种情况
helloFE的博客
06-09 5457
近日在微信小程序开发中遇到需要阻止swiper组件手动滑动的需求，看了一些博文，列举的情景比较单一，这里把我想到的情况分别针对处理一下，如有遗漏，欢迎补充 一、同页面只有一个swiper，且swiper-item上没有需要点击的按钮 1.用css控制，在swiper上给个样式pointer-events:none; 使点击无法触发 2.在swiper-item绑定一个事件，catchtouchmove="catchtouchmove"，在事件中return false ...
微信小程序swiper禁止手动拖动
qq_16683523的博客
04-15 6563
微信小程序swiper禁止手动拖动
微信小程序swiper禁止用户手动滑动代码实例
10-16
微信小程序是一种在微信平台上运行的应用程序，它提供了丰富的界面组件和API供开发者使用。其中，swiper组件是一个滑动视图容器，常用于制作轮播图效果。然而，在某些场景下，开发者可能不希望用户能够手动滑动...
微信小程序swiper实现滑动放大缩小效果
10-17
在微信小程序中实现滑动放大缩小效果主要依赖于swiper组件，这是微信小程序中一个用于轮播展示图片或者其他内容的组件。通过合理配置swiper组件的属性和绑定事件，可以实现用户在滑动时图片放大缩小的交互效果。 ...
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
微信小程序swiper禁止左右横划切换swiper-item
m0_58889179的博客
01-31 1767
在上设置catch:touchmove拦截，然后在其中嵌套使用，此时左右滑动和scroll-view中的上下滑动都是不行的，需要设置的高度，然后swiper-item 与 scroll-view及其中间的view都需要设置高度为100%，即可完成禁止左右滑动，允许内容上下滑动的效果。
微信小程序swiper禁止滑动的方法
一口吃个胖子乐的的博客
02-24 1737
wxml: <swiper-item catchtouch="stopTouchMove"> <swiper-item> js:stopTouchMove:function(){ return:false }
【uniapp】设置swiper组件禁止手动滑动失效的问题
落叶随风将要去远方，看沿途的风景回忆一场...
11-20 6309
写uniapp项目有个跨多端平台的有点，但是要埋的坑比较多，这不有一个平台跨出现问题了，编译运行在微信小程序开发工具上会出现了，swiper组件设置禁止手动滑动失效的问题，接下来讲讲怎么解决。
微信小程序swiper使用注意
热门推荐
土家稀哥
10-17 1万+
在开发微信小程序时，使用官方提供的swiper组件必须放在最外层，并且不能使用任何嵌套，不然没有效果。
微信小程序swiper禁止滑动多种方法
xx_的博客
01-10 1万+
如图每个小块都是一个轮播 每个轮播块 都有链接那么在navigator里边加上一个view将他定位变成一个透明的遮罩层就ok了 方法二 wxml：在 swiper-item 增加一个方法 &lt; swiper-item catchtouchmove=“stopTouchMove” &gt; &lt; swiper-item &gt; js：方法返回false stopTouchMove: f...
微信小程序中，如何禁止手动滑动 swiper 组件？
纠缠AI的亮子
08-04 1万+
swiper 组件实现水平滑动切换，有时候只想通过点击按钮切换，需要禁用手动滑动切换。可以用下面的实现方法： wxml：在 swiper-item 增加一个方法 &amp;lt;swiper-item catchtouchmove=&quot;stopTouchMove&quot;&amp;gt; js：方法实现返回false stopTouchMove: function() { return false; } ...
微信小程序之swiper限制循环滑动
weixin_37378399的博客
08-24 8122
最近接的一个单子是使用swiper来达到页面之间完美滑动的效果的。也就三个页面首页、内容页、尾页。 但是客户要求首页不能滑到尾页，尾页不能滑到首页。 在官方文档中没有找到方法，因此只能绕弯路了。  wxml页面代码：重点在于 current='{{show_index}}' &lt;swiper class='swiper' circular='true' vertical='true'...
微信小程序实现新闻轮播、禁止手动竖向滑动
aaa123aaasqw的博客
04-06 378
【代码】微信小程序实现新闻轮播、禁止手动竖向滑动。
微信小程序之禁止手动滑动切换swiper-item
MFMLN~ 星辰大海
08-05 1716
第一步： wxml中， 在swiper-item组件标签中绑定事件：catchtouchmove=“stopTouchMove” 第二步： js中， 添加 stopTouchMove() { return false; },
微信小程序swiper失效
最新发布
07-03
### 微信小程序 swiper 组件无法正常滑动的解决方案 在微信小程序开发过程中，`swiper` 组件常用于实现轮播图、横向滚动等效果。然而，在实际使用中可能会遇到 `swiper` 无法正常滑动的问题，常见原因包括数据绑定错误、组件状态异常、手势识别冲突以及高度设置不当等。 #### 1. 检查 current 值异常并重置 在某些情况下，当用户通过手势滑动页面时，`current` 的值可能会被错误地重置为 `0`，从而导致页面卡死。可以通过监听 `bindchange` 事件判断是否发生异常，并在连续出现多次错误时手动重置当前索引值[^3]。示例代码如下： ```javascript Page({ data: { activeIndex: 0, preIndex: 0, errorCount: 0 }, handleSwiperChange(e) { const { source, current } = e.detail; if (source === 'touch') { if (current === 0) { let count = this.data.errorCount + 1; this.setData({ errorCount: count }); if (count >= 3) { this.setData({ activeIndex: this.data.preIndex }); this.setData({ errorCount: 0 }); } } else { this.setData({ preIndex: current }); this.setData({ errorCount: 0 }); } } } }); ``` #### 2. 确保正确绑定 current 属性 若未正确绑定 `current` 属性或未在 WXML 中动态更新其值，可能导致 `swiper` 无法响应滑动动作。应在组件上使用 `current="{{activeIndex}}"` 并确保该值由数据驱动更新[^4]。 #### 3. 设置固定高度或自适应内容高度 如果 `swiper` 组件的高度未明确指定或设置为 `auto`，则可能造成内部内容布局错乱，影响滑动行为。推荐做法是为 `swiper` 设置固定高度（如 `height: 300rpx`）或根据内容动态计算高度[^4]。例如： ```html <swiper class="custom-swiper" style="height: {{contentHeight}}rpx;" current="{{activeIndex}}"> <!-- 内容 --> </swiper> ``` #### 4. 避免手势冲突 在某些嵌套结构中，父容器或其他子组件可能拦截了滑动手势，导致 `swiper` 无法响应。应检查是否存在其他 `scroll-view` 或 `movable-view` 组件与 `swiper` 同时监听触摸事件，并适当调整 `disable-scroll` 等属性以避免冲突。 #### 5. 使用第三方组件库增强兼容性 官方提供的 `swiper` 在部分设备上可能存在兼容性问题。可以考虑引入专为微信小程序优化的第三方滑动组件，如 `we-swiper`，它提供了更丰富的功能和更强的稳定性，能够更好地应对复杂场景下的滑动需求[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值