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

最新推荐文章于 2024-07-29 11:53:27 发布
最新推荐文章于 2024-07-29 11:53:27 发布
阅读量6.1k 收藏 6
点赞数 5
分类专栏： 疑难杂症 文章标签： javascript 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16683523/article/details/124196561
版权

先附上官方文档传送门  swiper | 微信开放文档

这是一个微信小程序的遗留问题，因为swiper是有一个allowTouchMove的属性控制，设置为false，则不能通过鼠标或手指选中，上下或左右拖动。

这个问题官方历经几年时间还是没有补上，不过楼主无意中发现一个解决方法，发现确实可用，故再此分享一下经验，希望能帮助到大家。

<swiper-item  catchtouchmove='onTouchMove'></swiper-item>

在标签上加入以上红字标识，就可以禁止滑动了

 今天是从业六年以来第8篇分享文章，也算是个进步吧，一天进步一点点，加油

好，今天的方法就分享到这里，如果各位有什么不明白的，可以在评论下留言，大家一起探讨。我是三井寿，一个永不放弃的男人！
在这里插入图片描述

鲨鱼*辣椒
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【微信小程序】禁止swiper手动滑动
weixin_42342065的博客
05-15 663
前言：在开发小程序的消息滚动的时候一般会采用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禁止用户手动滑动代码实例
10-16
主要介绍了微信小程序swiper禁止用户手动滑动代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序swiper禁止用户手动滑动
七夜的博客
03-10 729
用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有解决了有点击按钮不影响使用。
微信小程序——轮播标签swiper禁止手动拖动
a644292242的博客
04-23 687
在微信小程序官方文档上没有找到解决方法 随后网上冲浪找到此方法 在标签上加上catchtouchmove <swiper> <swiper-item catchtouchmove='catchtouchmove'></swiper-item> </swiper> 开发过程中遇到了，所以就记录一下 ...
微信小程序阻止swiper手动滑动的多种情况
helloFE的博客
06-09 4652
近日在微信小程序开发中遇到需要阻止swiper组件手动滑动的需求，看了一些博文，列举的情景比较单一，这里把我想到的情况分别针对处理一下，如有遗漏，欢迎补充 一、同页面只有一个swiper，且swiper-item上没有需要点击的按钮 1.用css控制，在swiper上给个样式pointer-events:none; 使点击无法触发 2.在swiper-item绑定一个事件，catchtouchmove="catchtouchmove"，在事件中return false ...
微信小程序swiper组件设置滚动监听(bindchange)导致swiper item闪烁、跳动、卡住BUG。
weixin_40336827的博客
04-23 6708
最近在使用swiper的时候，下拉刷新后导致swiper item不断的跳动卡住。 一开始以为是下拉刷新导致的，后面在开发社区看到相关的问题，是由于swiper导致的。 在手动滑动swiper时打出以下消息： 而自动轮播的detail->source 是autoplay 在拖动的时候和自动轮播产生了冲突，导致setData方法不断被调用。所以swiper i...
微信小程序实现上下手势滑动切换
m0_61396811的博客
03-12 839
实现一个微信小程序的复合滚动页面，主要通过Swiper组件实现垂直方向的轮播功能，每个轮播项内部使用Scroll-View组件来展示可垂直滚动的长内容，如图片和文本。
万字长文讲透微信小程序的底层架构
feixin369的博客
07-03 511
页面间中转进行自定义的转场动画，在原生应用里也是一个很常见的交互动画。在原来的小程序架构下，每个页面都是独立的 WebView 渲染，互相隔离，其跨页能力是基本不具备的。因此，Skyline 提供了基于 Worklet 机制的自定义路由模块，能实现市面上大多数页面转场动画效果。
微信小程序开发 开启
m0_62962469的博客
12-04 1万+
小程序是运行在微信环境中，而网页是运行在浏览器环境中。由于运行环境不同，所以小程序中，无法调用DOM和BOM的API。 但是，小程序中可以调用微信环境提供的各种API，例如 地理定位，扫码，支付。网页的开发模式：浏览器+代码编辑器。 而小程序有自己的一套标准开发模式：登录网址https://mp.weixin.qq.com/，注册一个个人的账号，填写好相关的信息，我们的账号就注册好了。 获取小程序的APPID。在上边的网址完成注册以后，我们在页面中可以找到我们的小程序的APPID展示在如图所示的位置。 微信
微信小程序开发———音乐播放器
热门推荐
qq_50582468的博客
10-27 3万+
目录 一 小程序主体功能介绍 二 常用组件和API介绍 音频API 常用组件 三 整体布局 数据定义 主体页面 运行效果 四 播放器页面 布局部分 样式部分 运行效果 五 播放列表页面 布局部分 样式部分 运行效果 全部功能实现代码index.js 一 小程序主体功能介绍 本小程序主要实现，音乐的播放、暂停，下一曲的切换，以及播放列表和当前播放歌曲的详细信息查看等。 二 常用组件和API介绍 音频API 介绍 创建音频时需要先创建一个对象实例，从而引用该
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
微信小程序swiper实现文字纵向轮播提示效果
12-28
小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。 效果 体验 代码 wxml ...
微信小程序swiper实现滑动放大缩小效果
10-17
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序swiper使用网络图片不显示问题解决
10-15
主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 636
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1312
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 852
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 252
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
微信小程序 swiper
07-28
关于微信小程序中的swiper组件，它是用来实现图片轮播效果的组件。可以通过在swiper组件中添加多个swiper-item子组件来展示多张图片，用户可以通过滑动或点击指示点来切换图片。 以下是一个简单的示例代码： ```...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值