小程序 弹出层 禁止页面滚动

最新推荐文章于 2025-04-10 14:27:29 发布
原创 最新推荐文章于 2025-04-10 14:27:29 发布 · 5.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决自定义弹出框导致页面滚动问题的方法，只需在弹出层上添加catchtouchmove='true'属性即可。此方法在真机上有效，但开发工具模拟器上可能无法体现效果。

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

添加自定义的弹出框后，当滚动鼠标时下边的页面也会跟着滚动

解决办法：
在弹出层上添加 catchtouchmove=’true’

<view class="sh_Model_box" catchtouchmove='true'>
...
</view>

注意：开发工具的模拟器上没有效果，必须真机测试，真机上有效果

小程序自定义弹层禁止页面滚动方案详解
chunchengshao0931的博客
08-20 504
方案一：通过小程序自定义组件scroll-view实现布局，动态修改scroll-y属性 缺点：布局局限于scroll-view组件，大部分需求都满足不了 方案二： 自定义弹层蒙层或者外层容器添加catchtouchmove事件 ```js <view class='mask-box' ...
小程序弹出层/抽屉封装 （抖音小程序）
最新发布
追风筝的博客
05-19 912
开发抖音小程序时，由于缺乏适配的UI框架和相关案例，我通过大模型封装了一套代码，实现了一个类似Element UI抽屉效果的弹出层组件。该组件支持从任意方向弹出，并包含关闭按钮和标题显示功能。代码结构分为两部分：HTML部分定义了抽屉的结构，包括头部区域和内容区域；JavaScript部分处理了抽屉的逻辑，如打开、关闭、位置更新等。通过这种方式，开发者成功解决了抖音小程序开发中的UI适配问题。
微信小程序页面阻止默认滑动事件
weixin_30826095的博客
08-14 1672
在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小程序的页面会有个默认的下拉和上滑动画,这时只需要将该页面的json文件中加入 "disableScroll": true 就可以了 转载于:https://www.cnblogs.com/l...
微信小程序取消页面滚动效果的几种方法
zero_person_xianzi的博客
02-13 3444
首先要考虑一个问题，取消页面滚动之后，是否要将滚动条滚动到顶部。 如果要 给最外层标签(这里默认为container)加个样式 .container{height:100%;overflow:hidden;} 再给page标签加个样式 page{height:100%;} 就完成了 如果不要 给最外层标签加个事件 catchtouchmove &lt;view class...
微信小程序禁止页面上下滑动的三个方式
小鱼的博客
06-29 3万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
小程序显示弹窗时禁止下层的内容滚动实现方法
10-17
在开发微信小程序的过程中，有时我们需要实现一个功能：当弹窗显示时，禁止下层内容的滚动，以确保用户的注意力集中在弹窗上。本篇将详细介绍两种实现这一功能的方法。 ### 方法一：利用`position: fixed` #### 1....
微信小程序弹出层实现细节与操作指引
此外，微信小程序弹出层的设计还应该考虑到用户体验，比如在弹出层打开后，应该提供一个明显的关闭按钮，以便用户可以方便地关闭弹出层。在某些情况下，用户在点击弹出层的其他部分时，也可能会希望弹出层能够自动...
禁止弹窗中蒙层底部页面跟随滚动的几种方法
01-19
但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。 那么，如何阻止呢？请看以下分析： 方案分析 方案一 打开蒙层时，给...
微信小程序禁用页面滚动的几种方式
weixin_53641562的博客
06-03 3770
微信小程序禁用页面滚动的几种方式
微信小程序弹窗之后禁止页面滚动
肖肖肖丽珠的博客
09-19 1186
但是这种方法适用于没有滚动条的页面。点击的是第二页的一个内容弹窗的。这会导致页面滚动条又跑到最前面。看到网上一个说法是弹窗之后给当前页面最外层加个position:fixed。catchtouchmove="true"就行啦。
禁止页面滚动的方法-微信小程序
FaxMiao的博客
04-10 1051
在微信小程序中，有几种方法可以禁止页面滚动。
微信小程序弹出层禁止滚动穿透
sxy323的博客
04-19 1508
uniapp实现微信小程序中禁止滚动穿透、打开弹出层禁止底部页面滚动
微信小程序弹窗滚动导致页面穿透问题的解决办法
leiwenen的博客
04-28 6264
最近在做小程序，由于小程序提供的弹窗样式有限，我们通常会自定义弹窗组件（我都是在弹窗蒙层上加了catchtouchmove="true",保证最基本的穿透问题但是解决不了弹窗内容区域需要滚动的情况），那么就会导致页面穿透问题，具体表现有手指上下滑动弹窗部分，底部页面也同时滑动、如果配置了onPullDownRefresh页面刷新则页面刷新也会触发，我的解决过程如下： 1.最简单的想法： 最开始...
解决小程序自定义弹窗滚动穿透问题
weixin_43923808的博客
11-24 2299
方法一、catchtouchmove="true"
微信小程序——小实现(禁止页面滚动、长按复制、长按识别二维码)
Joyce的前端日常
10-17 9770
###1. 禁止页面滚动 对于小程序某些一屏的页面，特别是全屏的swiper，并不希望页面在竖直方向上可以滚动。 实现方式： 在需要禁止滚动页面的json中加入： &quot;disableScroll&quot;: true 注意：只在页面配置中有效，无法再app.json中设置该项 参考：https://developers.weixin.qq.com/miniprogram/dev/framework/con...
小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
热门推荐
lomenw的博客
06-08 4万+
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。解决方法：在弹出层加上 catchtouchmove 事件 示例代码：&lt;view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove"&gt;  &lt;view class="m
禁止小程序页面滑动的方法：
weixin_38245489的博客
08-15 5563
{ "navigationBarTitleText": "手机账号登录", "backgroundColor": "#FFF", "backgroundTextStyle": "light", "disableScroll": true }
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Emma'

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值