微信小程序-自定义弹窗禁止页面上下滑动

最新推荐文章于 2023-03-15 17:20:49 发布
最新推荐文章于 2023-03-15 17:20:49 发布
阅读量1.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cc1314_/article/details/84952317
本文讲解了如何通过设置catchtouchmove或catchtouchstart属性为true来捕获touch事件，这对于移动设备上的应用交互设计至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

设置catchtouchmove="true"或者catchtouchstart='true'，true不定义

解决微信小程序自定义弹窗滚动穿透问题
aaa123aaasqw的博客
05-30 1595
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
Emily
08-01 2万+
实现这么一个功能，点击选项进行选择，效果是从底部弹出选项框（带滑出动画），选择了某项或者点击其他地方，隐藏（带滑出动画）。效果图如下： 可适用于任何场景，如普通选项（如图）或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。 1. wxml代码 <view class="wrap"> <view bindtap="showModal"> ...
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
10-15
主要介绍了微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能，利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置，具体实例代码跟随小编一起看看吧
微信小程序禁止页面上下滑动的三个方式
热门推荐
小鱼的博客
06-29 3万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
小程序禁止页面上下滑动
Iphone886的博客
02-10 607
单页面禁止上线下滑动，页面弹窗后，页面禁止上下滑动
小程序页面禁止滑动
weixin_33774308的博客
04-08 3018
要做一个弹窗功能，弹窗是可以拖拽的，而且弹窗里的元素是有bindtap事件的，在弹窗使用了bindtouchstart之后发现弹窗拖拽的同时背景也在滑动，改为使用了catchtouchstart之后背景不滑动了，但是发现子元素的bindtap事件无法执行，于是又改为了bindtouchstart，换一种思路，选择另一种方法就是如何让页面禁止滑动，只需要加上下边的代码到本页json文件就可以了 ，...
微信小程序禁止页面上下滑动；uni-app微信小程序禁止页面上下滑动；uni-app小程序上下滑动；
i_am_a_div的博客
10-13 2593
阻止小程序某个页面上下滑动，最简单有效方法；直接对小程序当前页的最外层标签盒子，设置固定定位即可！ 设置固定定位后，页面的最大盒子宽度可能不是自动撑满的，那就自己在calc计算下宽度即可 .box { // 加这两行代码是为了固定定位 解决此页面上下可滑动回弹问题 position: fixed; width: calc(100vw - 110rpx); height: calc(100vh - 100rpx); padding: 50rpx 55rpx; } ...
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
10-16
微信小程序自定义弹窗的滚动行为与页面滚动冲突是一种常见问题，解决这个问题是提高用户体验的重要一环。接下来将详细介绍解决微信小程序自定义弹窗滚动与页面滚动冲突的方法。 首先，需要注意的是微信小程序页面...
微信小程序-自定义从底部弹起的滚动选择器
10-12
在微信小程序中，为了提供丰富的用户交互体验，开发者往往需要实现各种自定义组件，其中就包括了从底部弹起的滚动选择器。这个自定义组件在许多场景下都非常实用，比如设置选项、日期选择等。 1. **自定义标题** ...
小程序如何禁止用户上下滑动
hfdxmz_3的博客
08-04 799
写个这种效果出来 很多时候我们想禁止用户的上下滑动的操作 catchtouchmove="preventMove" 在view上加这个代码即可 （ps：别用鼠标滚轮啊 真机调试）
微信小程序页面上下滚动效果
10-16
主要为大家详细介绍了微信小程序页面上下滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序显示弹窗时禁止下层的内容滚动实现方法
10-17
主要介绍了小程序显示弹窗时禁止下层的内容滚动实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序自定义可滑动日历界面
10-17
主要为大家详细介绍了微信小程序自定义可滑动日历界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现炫酷的弹出式菜单特效
12-11
今天给大家带来一个微信小程序的弹出是菜单效果，老规矩先上效果图。(录制的gif动画有点卡，实际真机或是模拟器上很顺畅) 先简单说下思路： 1、首先在屏幕的某个位置放几个悬浮按钮，放几个看你需要的功能 2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩，这个遮罩在我前面自定义modal弹框时有用到 3、分别对按钮做旋转和移动动画和透明度，造成动画差异就是位移的动画距离不同 4、收起的时候回到原来位置并且让透明度变成0就ok了 思路说完了，下面开始上实现代码，这里同样也是封装成了组件，方便调用。 首先是wxml实现 <view class="drawer_screen" b
小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
唯独是你的博客
04-03 863
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 解决方法： 在弹出层加上 catchtouchmove 事件 示例代码： <view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove"> <...
微信小程序page禁止页面上下滑动
S筱潇S四维Smile
04-22 6116
在单页面设置disableScroll为true即可; 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置 在需要的页面的json文件里添加即可： { "disableScroll":true }
小程序 页面禁止左右上下滑动
weixin_45102016的博客
10-20 686
{ “usingComponents”: { “i-checkbox-group”: “…/…/…/dist/checkbox-group/index”, “i-checkbox”: “…/…/…/dist/checkbox/index”, “i-radio-group”: “…/…/…/dist/radio-group/index”, “i-radio”: “…/…/…/dist/radio/index”, “i-toast”: “…/…/…/dist/toast/index” }, “navigatio
微信小程序弹窗打开时，控制页面不能滚动
weixin_43834227的博客
03-15 1876
微信小程序弹窗与页面滚动问题处理
微信小程序自定义弹窗输入组件详解与实现
本文将深入解析如何在微信小程序中自定义实现一个弹窗输入组件，包括遮盖层的创建与管理以及弹窗窗口的具体构造。 首先，实现弹窗输入需要一个半透明的遮盖层，这个遮盖层用来暂时隐藏其他内容并引导用户关注弹窗。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值