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

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

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

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

在这里插入图片描述

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

禁止

  1. 在 swiper-item 中添加 catchtouchmove='catchTouchMove'
  2. 在js 中添加代码↓
// 截获竖向滑动
 catchTouchMove:function(res){
   return false
 },
微信小程序swiper禁止用户手动滑动代码实例
10-16
微信小程序是一种在微信平台上运行的应用程序，它提供了丰富的界面组件和API供开发者使用。其中，swiper组件是一个滑动视图容器，常用于制作轮播图效果。然而，在某些场景下，开发者可能不希望用户能够手动滑动...
微信小程序swiper实现滑动放大缩小效果
10-17
在微信小程序中实现滑动放大缩小效果主要依赖于swiper组件，这是微信小程序中一个用于轮播展示图片或者其他内容的组件。通过合理配置swiper组件的属性和绑定事件，可以实现用户在滑动时图片放大缩小的交互效果。 ...
微信小程序swiper禁止用户手动滑动
七夜的博客
03-10 1086
用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有解决了有点击按钮不影响使用。
微信小程序swiper禁止用户滑动
qinnzheng
11-23 7031
小程序swiper
微信小程序swiper禁止手动拖动
qq_16683523的博客
04-15 6703
微信小程序swiper禁止手动拖动
微信小程序阻止swiper手动滑动的多种情况
helloFE的博客
06-09 5639
近日在微信小程序开发中遇到需要阻止swiper组件手动滑动的需求，看了一些博文，列举的情景比较单一，这里把我想到的情况分别针对处理一下，如有遗漏，欢迎补充 一、同页面只有一个swiper，且swiper-item上没有需要点击的按钮 1.用css控制，在swiper上给个样式pointer-events:none; 使点击无法触发 2.在swiper-item绑定一个事件，catchtouchmove="catchtouchmove"，在事件中return false ...
微信小程序swiper禁止左右横划切换swiper-item
m0_58889179的博客
01-31 1918
在上设置catch:touchmove拦截，然后在其中嵌套使用，此时左右滑动和scroll-view中的上下滑动都是不行的，需要设置的高度，然后swiper-item 与 scroll-view及其中间的view都需要设置高度为100%，即可完成禁止左右滑动，允许内容上下滑动的效果。
精选资源
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
【微信小程序】禁止swiper手动滑动
weixin_42342065的博客
05-15 944
前言：在开发小程序的消息滚动的时候一般会采用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禁止手动滑动，只能自动切换
weixin_44363139的博客
10-29 1881
在开发微信小程序过程中需求是禁止swiper手动滑动，只能自动滚动 解决方法： 在swiper-item中加入catchtouchmove <swiper-item catchtouchmove='catchTouchMove'> //禁止swiper手动滑动的时间 catchTouchMove:function(){ return false }, 如有问题欢迎一起谈论啊~ ...
微信小程序swiper禁止手动滑动方法
Mystic_a的博客
06-16 2109
用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用手动滑动，又解决了有点击按钮不影响使用 。 以下为wxml文件： <swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:calc(100vh-87rpx)"bindchange="bindChange"> <!--外来人员--> <swiper-itemca...
swiper禁止手动滑动
eddioio的博客
07-04 6691
【前言】 本文介绍下swiper中禁止swiper禁止手动滑动 【主体】 只需要在最外层的容器上增加class="swiper-no-swiping"（在引入了swiper相关css的前提下） ...
【uniapp】设置swiper组件禁止手动滑动失效的问题
落叶随风将要去远方，看沿途的风景回忆一场...
11-20 6571
写uniapp项目有个跨多端平台的有点，但是要埋的坑比较多，这不有一个平台跨出现问题了，编译运行在微信小程序开发工具上会出现了，swiper组件设置禁止手动滑动失效的问题，接下来讲讲怎么解决。
微信小程序swiper禁止滑动的方法
一口吃个胖子乐的的博客
02-24 1751
wxml: <swiper-item catchtouch="stopTouchMove"> <swiper-item> js:stopTouchMove:function(){ return:false }
微信小程序中，如何禁止手动滑动 swiper 组件？
阅读之后，对你有帮助，那就点个赞再走吧
04-03 2786
swiper 组件实现水平滑动切换，有时候只想通过点击按钮切换，需要禁用手动滑动切换，让它返回一个false就好了呀。可以用下面的实现方法： wxml：在 swiper-item 增加一个方法 <swiper-item catchtouchmove="stopTouchMove"> js：方法实现返回false stopTouchMove: function() { retu...
uni-app——uniapp设置swiper组件禁止手动滑动失效解决方案
qq_43201350的博客
02-13 2206
uni-app——uniapp设置swiper组件禁止手动滑动失效解决方案
swiper如何禁止用户滑动
weixin_30394633的博客
11-16 1864
禁止用户滑动，只需要在最外层添加class “swiper-no-swiping” <div class="swiper-container swiper-no-swiping"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</d...
微信小程序swiper向右滑动
最新发布
08-26
在微信小程序中，实现对 `swiper` 组件向右滑动的控制可以通过以下几种方式来完成： ### 1. 通过按钮控制手动切换滑块 可以使用按钮来手动控制 `swiper` 组件切换到右侧的滑块。具体实现方式是通过 `current` 属性动态更新当前滑块的索引。例如： ```javascript Page({ data: { swiperCurrent: 0, // 当前 swiper 索引 swiperList: ['img1.jpg', 'img2.jpg', 'img3.jpg'] // 滑块列表 }, // 向右滑动 nextSwiper() { const { swiperCurrent, swiperList } = this.data; const nextIndex = (swiperCurrent + 1) % swiperList.length; this.setData({ swiperCurrent: nextIndex }); } }); ``` 在 WXML 文件中绑定按钮事件和 `swiper` 的 `current` 属性： ```html <swiper current="{{swiperCurrent}}" class="swiper-box"> <block wx:for="{{swiperList}}" wx:key="index"> <swiper-item> <image class="targetImg" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> <button bindtap="nextSwiper">向右滑动</button> ``` ### 2. 自动滑动并控制方向 `swiper` 组件支持自动滑动功能，通过 `autoplay` 属性可以实现自动向右滑动的效果。例如： ```html <swiper autoplay interval="3000" class="swiper-box"> <block wx:for="{{swiperList}}" wx:key="index"> <swiper-item> <image class="targetImg" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 通过设置 `interval` 属性可以控制滑动的时间间隔（单位为毫秒），而 `autoplay` 属性为 `true` 时，`swiper` 会自动向右滑动。 ### 3. 通过触摸事件控制滑动 如果需要阻止用户手动滑动，可以通过监听触摸事件来实现控制逻辑。例如，在按钮上监听触摸事件，并动态修改 `autoplay` 属性： ```javascript Page({ data: { autoplay: true }, // 触摸开始时阻止自动滑动 catchtouchstart() { this.setData({ autoplay: false }); }, // 触摸结束时恢复自动滑动 touchend() { this.setData({ autoplay: true }); } }); ``` 在 WXML 文件中绑定触摸事件： ```html <swiper autoplay="{{autoplay}}" class="swiper-box"> <block wx:for="{{swiperList}}" wx:key="index"> <swiper-item> <image class="targetImg" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> <button catchtouchstart="catchtouchstart" catchtouchend="touchend">手动滑动控制</button> ``` ### 4. 显示多个滑块并控制滑动方向 通过 `display-multiple-items` 属性可以同时显示多个滑块，并结合 `next-margin` 和 `previous-margin` 属性控制滑动的样式。例如： ```html <swiper display-multiple-items="3" next-margin="60rpx" previous-margin="60rpx" class="swiper-box"> <block wx:for="{{swiperList}}" wx:key="index"> <swiper-item> <image class="targetImg" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 此配置可以同时显示多个滑块，并且滑动时会显示相邻滑块的部分区域。 ### 5. 循环滑动 通过 `circular` 属性可以实现首尾相接的循环滑动效果，使滑块在向右滑动时无缝衔接： ```html <swiper circular class="swiper-box"> <block wx:for="{{swiperList}}" wx:key="index"> <swiper-item> <image class="targetImg" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值