小程序禁止屏幕滑动

最新推荐文章于 2023-11-01 16:27:14 发布
最新推荐文章于 2023-11-01 16:27:14 发布
阅读量384 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46858893/article/details/119032643
版权

小程序禁止屏幕滑动

给滑动的元素绑定个catchtouchmove事件

作用：解决滑动遮罩层，遮罩层下面的元素会滑动

      <view catchtouchmove="forbidTouchMove"></view>
在js代码里把事件写出来
forbidTouchMove() {},
tellme_0527
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【小程序教程】微信小程序的事件处理和交互逻辑（tap logpress touchmove input submint事件&冒泡与捕捉最详细讲解）
shenchengyv的博客
10-31 2189
事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因：提升用户体验：良好的事件处理和交互逻辑可以使小程序更加易用和友好，提升用户体验。通过合理设置事件触发条件和交互效果，可以使用户操作更加顺畅和自然。增加功能和互动性：事件处理可以实现用户与小程序之间的交互，例如点击按钮、滑动页面、输入表单等。通过事件处理，开发者可以为小程序增加各种功能和互动性，满足用户的需求。数据交互和更新：事件处理可以与后台数据进行交互，实现数据的获取、更新和展示。
小程序页面禁止滑动
weixin_33774308的博客
04-08 2977
要做一个弹窗功能，弹窗是可以拖拽的，而且弹窗里的元素是有bindtap事件的，在弹窗使用了bindtouchstart之后发现弹窗拖拽的同时背景也在滑动，改为使用了catchtouchstart之后背景不滑动了，但是发现子元素的bindtap事件无法执行，于是又改为了bindtouchstart，换一种思路，选择另一种方法就是如何让页面禁止滑动，只需要加上下边的代码到本页json文件就可以了 ，...
小程序禁止页面上下滑动
Iphone886的博客
02-10 486
单页面禁止上线下滑动，页面弹窗后，页面禁止上下滑动
小程序弹窗阻止滑动的两种方法
qq_26642611的博客
04-15 901
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景1：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove=‘true‘ 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，定义no-scr...
小程序遮罩禁止滚动
qq_53987671的博客
06-07 5113
当小程序使用页面进行滚动时，可以给遮罩设置catchtouchmove属性来禁止页面滚动，这个效果在小程序开发工具上测不出来，只有在手机上有效果。 2、scroll-view滚动 如果遮罩是scroll-view元素的子元素，当弹出遮罩时可以通过修改scroll-y或者scroll-x属性的布尔值为false来禁止scroll-view元素的滚动。...
小程序遮罩层禁止滑动
搬砖小鱼，请多指教呦
08-05 3352
这个方法其实很粗暴，实际上就是设定一个触摸函数但是没有任何反应： <view catchtouchmove=”true“ > 不想让他滑动 </view>
微信小程序swiper禁止用户手动滑动代码实例
01-03
最近做一个项目，由于用到了竖向swiper，导致占用屏幕过大，用户滑动总是滑动到swiper组件，页面无法向下拉动，于是找各种办法禁止用户手动滑动swiper组件。 经过网上一番查找，网友们也是闹洞大开，各种方法都想...
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
01-21
利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。 这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动，需要将整个卡片分为两部分。 <...
[教程] Rom 优化小技巧
07-30
ROM 优化小技巧 在 Android 系统中，ROM 优化是一项非常重要的工作。通过对 ROM 的优化，可以提高系统的性能、速度和整体体验。在这篇文章中，我们将介绍 19 种 ROM 优化小技巧，帮助您快速优化您的 Android 设备。...
程序天下:JavaScript实例自学手册
07-08
20.15 执行客户端的可执行程序 20.16 自动调用OutLook发送邮件 20.17 弹出窗口选择颜色 20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术：DOM和userData的...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
20.15 执行客户端的可执行程序 20.16 自动调用OutLook发送邮件 20.17 弹出窗口选择颜色 20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术：DOM和userData的...
小程序弹出层---史上最简单写法,已解决滚动穿透问题
热门推荐
辣子鸡的博客
08-23 3万+
脱下裤子撸妹子，卷起袖子撸码子 --------中国当红辣子鸡。 1、实现小程序弹出层非常简单：只需要在元素内引用一下这些标签即可实现，  style="position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index:999;background-color:rgba(0,0,0,0.5);" 背景颜色自己
微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动
最新发布
11-01 2143
微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动
小程序catchtouchmove事件
hahahhahahahha123456的博客
06-03 6806
wxml： <view class="moveWrap"> <view class="move" style="height:{{rH}}rpx;width:{{rW}}rpx;left:{{x}}px;top:{{y}}px;" catchtouchmove="_minMove"></view> </view> wcss: /* pages/move/move.wxss */ .moveWrap { height: 100vh; widt
关于支付宝小程序 onTouchMove 和 catchTouchMove 事件会带动兄弟组件滑动的问题以及解决方法
weixin_44758974的博客
08-25 1100
在支付宝小程序中两个兄弟view，底部 view 的高度超出屏幕可上下滑动，上面的 view 宽高为100rpx，设置 onTouchMove 或者 catchTouchMove 会带动大的 view 滑动。起初认为是冒泡事件的作用，但是排除了，首先冒泡事件是子组件向父组件传递，而现在是两个兄弟组件。最后解决方法是在大的 view 外面套一个 scroll-view 组件，通过控制。来控制下面大的view组件的滑动。在覆盖在上面的小 view 组件添加。
小程序阻止手机自带的滑动返回退出事件（uni-app，微信小程序，page-container）
weixin_47211345的博客
03-11 5442
阻止手机自带滑动返回事件的需求实现 和 page-container的使用
小程序: catchtouchmove阻止弹窗后滚动穿透
轻风细雨_林木木
11-11 1822
参考资料：https://blog.csdn.net/u010809694/article/details/88317752 解决办法： 在触发页面的view上设置catchtouchmove='方法名’ 实例： 代码： <view catchtouchmove='filterViewMove'> /* 内容…… */ </view> 备注： 只要在触发页面设置方法就好，但是为了避免提示报错，可以在.js文件中添加一个对应方法。 ...
微信小程序引入组件以及catchtouchmove实现拖动效果
吕小布布布的博客
04-23 9619
首先我们建一个跟pages同级的一个文件夹components，customer里面就是我们要写的组件，其目录结构如下： wxml代码如下： <view class='customer' catchtouchmove="setTouchMove" style="top:{{top}}rpx;left:{{left}}rpx"> <button open-ty...
微信小程序滑动穿透事件处理方案
sdfujichao的博客
04-27 5935
滑动穿透事件处理：亲测可行！在下面这个图中只有箭头值的地方是滑动的区域，但是当用手滑动上部红色区域的时候下面的滑动区域也跟着滑动，这个效果不是我们希望的。给上面红色区域添加这个事件catchtouchmove="move" 。然后在js中在实现这个方法 move: function(){},这样就可以了。其实这个现象的出现就是事件冒泡传递过去了。catchtouchmove属性就是去掉冒泡的事件绑...
小程序怎么禁止屏幕左右滑动
07-16
要禁止小程序屏幕的左右滑动，可以通过以下两种方式实现： 1. 使用`catchtouchmove`事件阻止滑动：在小程序的页面元素上添加`catchtouchmove`事件，然后在事件处理函数中调用`event.preventDefault()`方法阻止默认...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值