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

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

#微信小程序

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

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

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

<!--弹出框  -->
<view class="sh_Model_box" catchtouchmove='true'>
...
</view>

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

微信小程序 弹出层禁止页面滚动
IT_iosers的博客
05-17 1318
微信小程序 vant 中 所有弹出层都会有的一个问题 滑动弹出层 会出现页面也滚动 如下图 解决方法： 1、首先在最外围的类中加入overflow: hidden; 2、当弹出层出现的时候 给最外围的view 加入root-fixed 类 隐藏的时候 去掉root-fixed <view class="root {{isScroll?'root-fixed':''}}"></view> isScroll 控制是否绑定root-fixed 这个类 .root {
微信小程序弹出层，右上角关闭按钮
07-14
微信小程序弹出层的设计与实现，涉及到了小程序的基本语法、组件交互、样式控制等多个方面。理解并掌握这些知识点，对于构建高效、友好的小程序应用至关重要。在实际开发中，可以根据需求调整弹出层的样式、布局和...
小程序 弹出层 禁止页面滚动
Nina_xy123的博客
08-20 4623
添加自定义的弹出框后，当滚动鼠标时下边的页面也会跟着滚动 解决办法： 在弹出层上添加 catchtouchmove=’true’ &lt;!--弹出框 --&gt; &lt;view class="sh_Model_box" catchtouchmove='true'&gt; ... &lt;/view&gt; 注意：开发工具的模拟器上没有效果，必须真机测试，真机上有效果...
小程序自定义弹层禁止页面滚动方案详解
chunchengshao0931的博客
08-20 522
方案一：通过小程序自定义组件scroll-view实现布局，动态修改scroll-y属性 缺点：布局局限于scroll-view组件，大部分需求都满足不了 方案二： 自定义弹层蒙层或者外层容器添加catchtouchmove事件 ```js <view class='mask-box' ...
微信小程序页面阻止默认滑动事件
weixin_30826095的博客
08-14 1682
在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小程序的页面会有个默认的下拉和上滑动画,这时只需要将该页面的json文件中加入 "disableScroll": true 就可以了 转载于:https://www.cnblogs.com/l...
微信小程序弹窗之后禁止页面滚动
肖肖肖丽珠的博客
09-19 1290
但是这种方法适用于没有滚动条的页面。点击的是第二页的一个内容弹窗的。这会导致页面滚动条又跑到最前面。看到网上一个说法是弹窗之后给当前页面最外层加个position:fixed。catchtouchmove="true"就行啦。
【微信小程序】阻止遮罩层下的页面滚动
一出好剧
12-07 2789
微信小程序 阻止遮罩层下页面滚动
微信小程序自定义弹出模态框禁止底部滚动功能
10-15
综上所述，微信小程序自定义弹出模态框禁止底部滚动功能是通过结合WXML、WXSS和JavaScript代码来实现的，通过禁止触摸移动事件冒泡以及控制页面显示状态，达到用户体验优化的目的。这些知识点对于微信小程序的开发者...
微信小程序自定义弹出层效果
10-15
在微信小程序中，自定义弹出层是一种常见的交互设计，用于显示临时性的信息或功能，如登录、选择、提示等。本教程将详细介绍如何在微信小程序中实现自定义弹出层的效果。 首先，我们需要理解微信小程序的基本结构，...
微信小程序实现弹出菜单功能
01-03
遮罩优先级在弹出框之下； 弹出框内标签的设置； 滚动栏滚动条的隐藏 如何解决？ 弹性布局，横向，三者平分整栏; 状态监听点击事件，数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index； 弹性布局...
小程序弹窗阻止滑动的两种方法
qq_26642611的博客
04-15 1081
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 场景1：弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。 简单写法：catchtouchmove=‘true‘ 此种方式会阻止弹窗内内容的滚动。 场景二：弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式，定义no-scr...
uniapp 禁止遮罩层下的页面滚动
UserGuan的博客
08-23 2213
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。将这个方法直接丢到弹窗的最外层 view 就好了，虽然在编译器上的滚轮依旧可以滚动，但真机环境下的手指滑动无法再触发。注意：如果使用 uview 之类的 ui 框架，@touchmove.stop.prevent 必须放在底层的 view 上面。
禁止页面滚动的方法-微信小程序
最新发布
FaxMiao的博客
04-10 1335
在微信小程序中，有几种方法可以禁止页面滚动。
1.解决小程序遮罩层遮住页面后滚动穿透问题
qq_43544841的博客
08-20 8832
小程序遮罩层遮住页面后滚动穿透问题分为两种情况： 1.蒙层mask没有滚动事件的情况 可以在mask这个view上直接添加事件catchtouchmove="ture"来防止滚动或者写一个方法也可以 代码如下： <view class="mask" wx:if="{{showModelcontact}}" catchtouchmove="prevent"></view> <!-- js --> prevent:function(){} 2.如果
【微信小程序】问题:如何让微信小程序页面不滚动
欢迎来到C-Homes
11-30 967
【微信小程序】问题:如何让微信小程序页面不滚动 将page的高度设为100%，页面最外层放一个view，打开弹窗时通过一个class增加样式，设页面高度100%，overflow: hidden来停止滚动 .scroll-lock { height: 100%; overflow-y: hidden; } ...
微信小程序禁止页面上下滑动的三个方式
小鱼的博客
06-29 3万+
开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下： 第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json
微信小程序（6）——禁止页面滚动
热门推荐
蜗牛先生
08-02 6万+
▍写在前面（来访者请直接浏览下一条） 最近在做一个美食类小程序的时候，需要用到一个购物车，自己不好构思，就仿照美团的购物车写了一个，然后就在这卡了一下：购物车列表是fixed脱离文本流的，在上下滚动购物车列表的时候，底部的页面竟然也会跟着滚动，这怎么成，所以我就找了一下关于这个问题的解决方案。 ▍效果预览 首先小声说一句，为了节约时间，所以在做数据模拟显示的时候，所有的图片还有名...
小程序显示弹窗时禁止下层的内容滚动
Sophia
08-17 1万+
小程序显示弹窗时禁止下层的内容滚动 ①  第一种方式 利用position:fixed.  禁止页面滚动. 一. 页面结构html  &lt;view class="indexPage {{proInfoWindow?'indexFixed':''}}"&gt; -----------此处为整个页面的结构内容 &lt;button catchTap="_proInfoWi...
小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
lomenw的博客
06-08 4万+
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。解决方法：在弹出层加上 catchtouchmove 事件 示例代码：&lt;view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove"&gt;  &lt;view class="m
微信小程序弹出层实现细节与操作指引
此外，微信小程序弹出层的设计还应该考虑到用户体验，比如在弹出层打开后，应该提供一个明显的关闭按钮，以便用户可以方便地关闭弹出层。在某些情况下，用户在点击弹出层的其他部分时，也可能会希望弹出层能够自动...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值