微信小程序swiper禁止滑动的方法

最新推荐文章于 2026-05-05 11:18:48 发布

原创最新推荐文章于 2026-05-05 11:18:48 发布 · 置顶 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序#swiper 专栏收录该内容

1 篇文章

订阅专栏

wxml:
<swiper-item catchtouch="stopTouchMove">
<swiper-item>
js:stopTouchMove:function(){
return:false
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一口吃个胖子乐

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序swiper禁止用户手动滑动代码实例

10-16

主要介绍了微信小程序swiper禁止用户手动滑动代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

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

qinnzheng

11-23

7160

小程序swiper

微信小程序swiper禁止滑动多种方法

最新发布

weixin_27013291的博客

05-05

435

本文针对uniapp的swiper组件在微信小程序中禁止滑动失效的问题，提供了终极解决方案——使用@touchmove.stop写法。通过分析问题根源、对比常规方案的局限性，详细介绍了这一方法的实现原理和跨平台兼容性，帮助开发者高效解决平台差异带来的滑动控制难题。

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

qq_16683523的博客

04-15

6777

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

微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

11-01

3981

微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

微信小程序阻止swiper手动滑动的多种情况

helloFE的博客

06-09

5812

近日在微信小程序开发中遇到需要阻止swiper组件手动滑动的需求，看了一些博文，列举的情景比较单一，这里把我想到的情况分别针对处理一下，如有遗漏，欢迎补充一、同页面只有一个swiper，且swiper-item上没有需要点击的按钮 1.用css控制，在swiper上给个样式pointer-events:none; 使点击无法触发 2.在swiper-item绑定一个事件，catchtouchmove="catchtouchmove"，在事件中return false ...

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

Mystic_a的博客

06-16

2173

用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用手动滑动，又解决了有点击按钮不影响使用。以下为wxml文件： <swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:calc(100vh-87rpx)"bindchange="bindChange">  <swiper-itemca...

微信小程序中如何让swiper禁止手动滑动，只能自动切换

weixin_44363139的博客

10-29

1920

在开发微信小程序过程中需求是禁止swiper手动滑动，只能自动滚动解决方法：在swiper-item中加入catchtouchmove <swiper-item catchtouchmove='catchTouchMove'> //禁止swiper手动滑动的时间 catchTouchMove:function(){ return false }, 如有问题欢迎一起谈论啊~ ...

微信小程序swiper组件禁用手动滑动

chengshilong6952的博客

08-10

1077

给swiper-item添加属性catchtouchmove="stopTouchMove" 然后在js中定义stopTouchMove方法 //禁用swiper滑动功能 stopTouchMove: function() { return false; }...

微信小程序swiper 阻止手动切换,swiper阻止滑动,动态阻止切换

glorious_future的博客

03-17

1836

讲一下逻辑,大概就是有两种情况第一种就是查询商品详情，查询成功了，要展示这个商品的加个趋势和同款好物，这是一个tab切换第二种情况就是查询商品失败了，就只展示同款好物了，所以这是个动态控制的我一开始就是如果商品查询失败了，就再第一个swiper-item标签上加上catchtouchmove //wxml <swiper-item class="goods_price" catchtouchmove="stopChange"></swiper-item>

微信小程序 swiper禁止手动切换

xccjk的博客

03-28

1209

微信小程序 swiper禁止手动切换给swiper设置catchtouchmove为true，设置swiper-item的catchtouchmove返回false <swiper class="swiper" indicator-dots="{{false}}" circular autoplay="{{true}}" vertical="{{true}}" interval="{{3000}}" duration="{{300}}" easing-functio

微信小程序禁用页面滚动的几种方式

weixin_53641562的博客

06-03

3868

微信小程序禁用页面滚动的几种方式

微信小程序swiper禁止左右横划切换swiper-item

m0_58889179的博客

01-31

2083

在上设置catch:touchmove拦截，然后在其中嵌套使用，此时左右滑动和scroll-view中的上下滑动都是不行的，需要设置的高度，然后swiper-item 与 scroll-view及其中间的view都需要设置高度为100%，即可完成禁止左右滑动，允许内容上下滑动的效果。

【uniapp】设置swiper组件禁止手动滑动失效的问题

落叶随风将要去远方，看沿途的风景回忆一场...

11-20

6836

写uniapp项目有个跨多端平台的有点，但是要埋的坑比较多，这不有一个平台跨出现问题了，编译运行在微信小程序开发工具上会出现了，swiper组件设置禁止手动滑动失效的问题，接下来讲讲怎么解决。

微信小程序遇到的问题

qq_36022463的博客

08-27

963

设置一个变量去控制，是否显示这个遮罩层，，设置一个current记录当前是第几页，，bindtouchstart，，bindtouchend，判断是往哪边滑动，来决定是否要显示这个遮罩层。向做启动页的时候，有一些swiper介绍，，最后一页是一个按钮，点击之后才会进入首页，，在第一页的时候，不能让他反向滑动，，在最后一页的时候，不能让他滑动到第一页。wx.redirectTo 是让当前页面出栈，在加载新的页面，，，，当我的当前页是这个栈的唯一页面的时候，就会出现闪屏。

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

七夜zippoe的博客

03-10

1186

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

uniapp中使用swiper组件实现禁止滑动功能

m0_60859997的博客

09-20

2305

uniapp中使用swiper组件实现禁止滑动功能

微信小程序之swiper限制循环滑动

weixin_37378399的博客

08-24

8223

最近接的一个单子是使用swiper来达到页面之间完美滑动的效果的。也就三个页面首页、内容页、尾页。但是客户要求首页不能滑到尾页，尾页不能滑到首页。在官方文档中没有找到方法，因此只能绕弯路了。 wxml页面代码：重点在于 current='{{show_index}}' <swiper class='swiper' circular='true' vertical='true'...

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

08-16

3643

做了个中奖的公告栏滚动不小心就点到滑动，如图不符合需求，所以需要禁掉，下面是步骤，想看上面那个怎么做的请移步我的另一篇文章传送门: https://blog.csdn.net/AIB_Kasic/article/details/99682428 禁止在 swiper-item 中添加 catchtouchmove='catchTouchMove' 在js 中添加代码↓ // 截获竖...