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

最新推荐文章于 2025-05-19 14:53:27 发布
最新推荐文章于 2025-05-19 14:53:27 发布
阅读量3.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AIB_Kasic/article/details/99683412

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

在这里插入图片描述

不符合需求，所以需要禁掉，下面是步骤，想看上面那个怎么做的请移步我的另一篇文章
传送门: 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 868
前言：在开发小程序的消息滚动的时候一般会采用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 2028
用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用手动滑动，又解决了有点击按钮不影响使用 。 以下为wxml文件： <swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:calc(100vh-87rpx)"bindchange="bindChange"> <!--外来人员--> <swiper-itemca...
微信小程序swiper禁止用户滑动
qinnzheng
11-23 6787
小程序swiper
微信小程序轮播图组件Swiper全解析
最新发布
爱的叹息的专栏
05-19 897
微信小程序的 swiper 组件用于实现图片或内容的滑动展示，支持多种自定义配置。通过 autoplay、interval、duration 等属性，可以控制自动播放、滑动动画时长等行为。circular 属性实现循环滑动，vertical 支持纵向滑动，bindchange 和 bindtap 分别用于处理滑块切换和点击事件。开发者可以通过 current 属性设置初始显示的滑块，并通过 wx:for 动态绑定数据。swiper 组件的高度需显式设置，且 swiper-item 中的内容应使用固定宽高或
微信小程序swiper禁止用户手动滑动
七夜的博客
03-10 1011
用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有解决了有点击按钮不影响使用。
微信小程序阻止swiper手动滑动的多种情况
helloFE的博客
06-09 5395
近日在微信小程序开发中遇到需要阻止swiper组件手动滑动的需求，看了一些博文，列举的情景比较单一，这里把我想到的情况分别针对处理一下，如有遗漏，欢迎补充 一、同页面只有一个swiper，且swiper-item上没有需要点击的按钮 1.用css控制，在swiper上给个样式pointer-events:none; 使点击无法触发 2.在swiper-item绑定一个事件，catchtouchmove="catchtouchmove"，在事件中return false ...
微信小程序swiper禁止手动拖动
qq_16683523的博客
04-15 6522
微信小程序swiper禁止手动拖动
微信小程序swiper禁止用户手动滑动代码实例
10-16
微信小程序是一种在微信平台上运行的应用程序，它提供了丰富的界面组件和API供开发者使用。其中，swiper组件是一个滑动视图容器，常用于制作轮播图效果。然而，在某些场景下，开发者可能不希望用户能够手动滑动...
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
微信小程序swiper禁止滑动的方法
一口吃个胖子乐的的博客
02-24 1732
wxml: <swiper-item catchtouch="stopTouchMove"> <swiper-item> js:stopTouchMove:function(){ return:false }
微信小程序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限制循环滑动
weixin_37378399的博客
08-24 8102
最近接的一个单子是使用swiper来达到页面之间完美滑动的效果的。也就三个页面首页、内容页、尾页。 但是客户要求首页不能滑到尾页，尾页不能滑到首页。 在官方文档中没有找到方法，因此只能绕弯路了。  wxml页面代码：重点在于 current='{{show_index}}' &lt;swiper class='swiper' circular='true' vertical='true'...
微信小程序实现新闻轮播、禁止手动竖向滑动
aaa123aaasqw的博客
04-06 374
【代码】微信小程序实现新闻轮播、禁止手动竖向滑动。
微信小程序之禁止手动滑动切换swiper-item
MFMLN~ 星辰大海
08-05 1707
第一步： wxml中， 在swiper-item组件标签中绑定事件：catchtouchmove=“stopTouchMove” 第二步： js中， 添加 stopTouchMove() { return false; },
钉钉小程序开发者工具swiper组件滑动不起作用
legender5431的博客
11-24 443
钉钉开发者工具
微信小程序swiper禁止左右横划切换swiper-item
m0_58889179的博客
01-31 1714
在上设置catch:touchmove拦截，然后在其中嵌套使用，此时左右滑动和scroll-view中的上下滑动都是不行的，需要设置的高度，然后swiper-item 与 scroll-view及其中间的view都需要设置高度为100%，即可完成禁止左右滑动，允许内容上下滑动的效果。
【uniapp】设置swiper组件禁止手动滑动失效的问题
落叶随风将要去远方，看沿途的风景回忆一场...
11-20 6180
写uniapp项目有个跨多端平台的有点，但是要埋的坑比较多，这不有一个平台跨出现问题了，编译运行在微信小程序开发工具上会出现了，swiper组件设置禁止手动滑动失效的问题，接下来讲讲怎么解决。
【uniapp中swiper禁止左右滑动、允许上下滑动】
shigecainiao的博客
01-12 2596
在某些极端的应用场景下，可能会碰到禁止swiper左右滑动，但是允许上下滑动。
小程序——swiper禁用滑动
Dream_Haunting的博客
01-13 993
在swiper-item上添加方法catchtouchmove 代码如下： //wxml <swiper-item catchtouchmove='catchTouchMove'> //js catchTouchMove:function(){ return false }
微信小程序swiper纵向轮播
04-01
微信小程序中的 `swiper` 组件默认是横向轮播的，但如果想要实现纵向轮播的效果，可以通过设置其属性来调整方向。 ### 实现步骤 1. **修改 swiper 的 orientation 属性** 在 `swiper` 标签中添加 `vertical=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值