微信小程序—弹窗出现禁止底层页面滚动

最新推荐文章于 2025-04-10 14:27:29 发布
最新推荐文章于 2025-04-10 14:27:29 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Poppy_LYT/article/details/105681749
版权
本文介绍了解决在移动端开发中遇到的弹窗触控事件被底层元素拦截的问题，通过在弹窗的最外层div上添加catchtouchmove=true属性，确保了弹窗能够正确捕获触摸事件。

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

在弹窗的最外层div加上属性
catchtouchmove=‘true’ // 开发工具看不出来需真机调试
在这里插入图片描述

小程序弹出层禁止列表滑动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...
weixin_36023192的博客
12-23 1091
弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。场景一：弹窗内无滚动内容可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡)。简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。此种方式会阻止弹窗内...
小程序弹出层禁止列表滑动_小程序自定义弹层禁止页面滚动方案详解
weixin_39802519的博客
12-23 432
方案一：通过小程序自定义组件scroll-view实现布局，动态修改scroll-y属性缺点：布局局限于scroll-view组件，大部分需求都满足不了方案二： 自定义弹层蒙层或者外层容器添加catchtouchmove事件```js弹层内容```缺点：弹层滑动不了；适用于自定义弹层不滑动的布局方案三：动态添加给最外层元素添加position:fixed样式```js内容区```缺点：当isMas...
小程序禁止滚动穿透，page-meta
空&白的博客
12-13 779
使用场景：页面中有弹窗，并且弹窗里数据超过弹窗的高，要在弹窗做滑动操作，当弹窗滑动到底部的时候，继续划动会导致底层页面的滚动，这就是。必须放在整个页面的template下面才行。maskShows是弹窗是否显示的字段，这样的话弹窗的滑动就不会影响到主页面了。如果把page-meta放在view里的话，会提示一个错误。这种情况对于体验感很不友好。
微信小程序-自制弹出框禁止页面上下滑动
Aimee的博客
03-29 9922
在微信小程序里面的弹出框有时候不能满足我们的需求，需要自己写弹出框，但是要保证页面不要上下滑动，解决方法是在遮盖层上用绑定手指触摸事件catchtouchstart。 微信小程序有bind和catch两种事件绑定方法，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。我们使用catch绑定手指触摸事件，然后他的父节点就不会收到事件冒泡，这样就实现了禁止页面上下
禁止页面滚动的方法-微信小程序
最新发布
FaxMiao的博客
04-10 638
在微信小程序中，有几种方法可以禁止页面滚动。
h5滚动时侧滑出现_H5开发－禁止页面上下滚动漏出微信黑色背景，自定义页面左右滑动事件，阻止事件冒泡...
weixin_39521009的博客
12-20 475
禁止页面上下滚动有时我们不希望H5在上划或者下划时滚动，漏出黑色背景现在这个做起来很简单，只需要将H5的最外层设置样式为position:fixed即可#main{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;}自定义页面左右滑动事件对H5的外层div添加touchstart和touchmove事件计...
解决微信小程序自定义弹窗滚动穿透问题
aaa123aaasqw的博客
05-30 1497
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。最外层元素动态添加fixed类。
微信小程序实现蒙版弹窗效果
10-17
微信小程序实现蒙版弹窗效果的知识点主要包括以下几个方面： 1. 微信小程序基础知识：微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序...
微信小程序 -解决弹窗滚动穿透问题
weixin_41195867的博客
12-03 1550
微信小程序 用fixed设置弹窗蒙层，当弹窗和内容都存在滚动时，滑动弹窗蒙层，下面的页面会有滚动。 希望的效果是弹窗内能正常滚动，滑动弹窗蒙层，下面页面不会产生滚动。 例如：页面上内容也有滚动，弹窗里有展示许多部分内容，需要滚动浏览。 代码块：https://developers.weixin.qq.com/s/hfS1ljmt7NmG （滑动蒙层，下面的页面不会产生滚动，但是但是，弹窗里的内容滚动超级不好，滚动反应很迟钝，要划4~5次才能滑动内容） modal.wxml <view catchtou
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
解决微信小程序中的滚动穿透问题
12-13
在微信小程序开发中，经常会遇到一个用户体验上的问题，即“滚动穿透”或称为“蒙层穿透”。这个问题发生在当用户打开一个使用`fixed`布局的蒙层（如弹窗）时，即使手指在蒙层上滑动，底部内容也会跟随滚动。这显然...
微信页面弹出窗口，底部不随窗口滑动而滚动,子页面滚动,父页面也动bug修复!
wsxc451的专栏
07-11 6924
在弹出窗口滑动时，遮罩后面的页面也会随之滑动，以为是时间冒 泡导致的，上网百度了好久，方法倒是找到了好多种，在电脑上也可以了。但是在微信里滑 动还是会拖动后面的页面，看到很多地方说用下面的代码就好了： $('html,body').css({'overflow':'hidden'}); 电脑上可以，微信上面还是不行。最终不断实践，问题解决了，还要多加一个css： 全选复制放进笔记$('h
微信小程序解决弹框下面内容滚动的问题（禁止弹框下面内容滚动）
Kino的博客
02-25 593
解决弹框弹出后，滑动屏幕弹框下面内容滚动的问题。 解决方案： 1.给view加上catchtouchmove=‘true’ 2.给catchtouchmove绑定一个空方法。
Java代码实现微信页面滚动防露底(核心代码)
Tony_Zzh的博客
06-26 762
这篇文章主要介绍了Java代码实现微信页面滚动防露底的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下 在网上找到了一个可以防页面滚动滑到顶端或底部的时候, 漏出微信丑丑的灰色底，下面小编把核心代码分享给大家供大家参考！ 我的核心代码: prevent:function () { var startX = 0, startY = 0; //touchstart事件 fu
解决小程序在高层级页面滑动时,低层级页面会跟着滑动的问题
Hope_wkx的博客
05-28 1349
问题: 打开组件并上下滑动组件内容时,页面也会跟着滑动 解决方法:由于安卓和ios情况不同,所以用了两种方法,双保险. 1.当组件打开时,给整个页面设置height:100vh, overflow:hidden, 让页面高度占满屏幕并隐藏多余内容,这样页面就不会滚动了. 安卓系统做到这一步就可以解决了. 2.ios系统在完成第1步时,该问题还没有解决,是因为ios会有回弹效果. 所以在组件上添加一个无内容的@touchmove.stop="doNothing"滑动事件,就可以禁止下层页面滑动. 理论上来
H5解决浏览器,微信背景的上下滑动问题，脱离窗口的js局部滚动解决方法
永远是死循环
02-28 8690
当我们使用手机浏览器或微信浏览器打开Html网页的时候，如果上下滑动页面，页面就会出现黑色的空白(如图所示)。那么如何解决滑动的时候如何避免出界，出现头部和底部的黑底？js代码：var method ={ setScroll:function(isreturn,classname){//局部滚动添加样式local_scroll,回调 if(classname==undefined){ ...
钉钉小程序弹窗滑动，底部页面跟着滑动
m0_73430799的博客
05-09 615
小程序弹窗滑动，底部页面跟着滑动
微信小程序弹窗打开时，控制页面不能滚动
小墨鱼的前端问题录
06-29 1003
通过这个节点可以获得类似于调用 wx.setBackgroundTextStyle wx.setBackgroundColor 等接口调用的效果。页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。通过控制cartShow，打开弹窗时，让页面不能滚动，关闭页面时，让页面恢复滚动。基础库 2.9.0 开始支持，低版本需做兼容处理。微信 weindows版：支持。解决方法：在wxml页面上添加。微信 mac版：支持。
微信小程序弹出层禁止滚动穿透
sxy323的博客
04-19 1429
uniapp实现微信小程序中禁止滚动穿透、打开弹出层禁止底部页面滚动
抖音小程序打开弹窗禁止页面滚动
04-01
<think>好的，我需要解决抖音小程序中弹窗显示时如何禁止页面滚动的问题。首先，我得回忆一下用户提供的几个引用内容，看看有没有可借鉴的解决方案。 根据引用[1]，使用scroll-view组件并将高度设为屏幕高度，可以控制弹窗内部滚动而不影响底层页面。引用[2]提到，处理滚动穿透时需要保存滚动位置，并在关闭弹窗时恢复，但可能会有位置重置的问题。引用[3]则建议用ScrollView替代View，并启用Y轴滚动来允许内容滚动，同时防止穿透。 抖音小程序的开发可能与微信小程序类似，可能需要类似的组件和方法。首先，当弹窗显示时，应该阻止页面滚动。可能的步骤包括： 1. **设置弹窗内容区域为ScrollView**：将弹窗的内容包裹在ScrollView中，并设置scrollY属性，这样弹窗内部可以滚动，而外层页面不会滚动。这类似引用[3]的方法。 2. **动态控制页面滚动**：在弹窗显示时，禁用页面的滚动能力。可能需要使用类似catchtouchmove的事件来阻止触摸事件的冒泡，防止页面滚动。但要注意，抖音小程序的API可能有所不同，需要查阅文档确认是否有类似的事件处理。 3. **保存和恢复滚动位置**：如引用[2]所述，在显示弹窗前记录当前的滚动位置，关闭弹窗后通过API恢复到之前的位置。这样可以避免底层页面位置改变的问题。需要用到类似onPageScroll的监听方法，以及pageScrollTo这样的滚动控制函数。 4. **使用遮罩层阻止滚动**：在弹窗显示时，添加一个遮罩层（mask），并在这个层上阻止触摸事件的默认行为。例如，给遮罩层绑定catchtouchmove事件，阻止滑动穿透。 接下来，需要具体实现这些步骤。例如，弹窗的结构可能包括一个遮罩层和一个内容区域。遮罩层使用catchtouchmove来阻止滑动，内容区域使用ScrollView来处理内部滚动。 可能的代码结构如下： - 弹窗组件使用scroll-view包裹内容，并设置scroll-y属性。 - 遮罩层绑定事件catchtouchmove="{{() => false}}"来阻止滑动。 - 在显示弹窗时，获取当前页面的滚动位置并保存，关闭时恢复。 需要注意的是，抖音小程序是否有对应的API支持这些操作，比如获取滚动位置和设置滚动位置的函数。如果存在差异，可能需要调整方法。此外，测试时要注意弹窗显示和隐藏时的页面行为，确保滚动位置正确恢复，并且弹窗内的滚动流畅。 总结解决方案的步骤： 1. 使用scroll-view组件处理弹窗内容滚动。 2. 通过catchtouchmove阻止遮罩层滑动事件。 3. 在弹窗显示时保存当前滚动位置，关闭时恢复。 4. 结合动态样式控制弹窗的显示与隐藏。 这样应该能有效阻止弹窗显示时的页面滚动问题，同时保持用户体验。</think>在抖音小程序中实现弹窗显示时禁止页面滚动的解决方案如下： ### 分步解决方案 1. **使用scroll-view组件包裹弹窗内容** ```html <view class="mask" catchtouchmove="{{() => false}}"> <scroll-view scroll-y style="height: 60vh;"> <!-- 弹窗内容 --> </scroll-view> </view> ``` - 通过`scroll-view`的`scroll-y`属性启用垂直滚动，确保弹窗内部内容可独立滚动[^3] - 遮罩层添加`catchtouchmove`事件阻止默认滚动行为[^2] 2. **动态控制页面滚动状态** ```javascript // 显示弹窗时记录当前滚动位置 onShowModal() { tt.pageScrollTo({ scrollTop: this.data.scrollTop, duration: 0 }); this.setData({ showModal: true }); } ``` - 调用抖音小程序的`pageScrollTo`API保持页面位置稳定[^2] 3. **保存/恢复滚动位置** ```javascript // 页面js中 onPageScroll(e) { this.setData({ scrollTop: e.scrollTop }); } ``` - 通过`onPageScroll`监听实时保存滚动位置[^2] 4. **CSS样式控制** ```css .mask { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } ``` - 使用`position: fixed`防止页面内容位移 ### 注意事项 1. 抖音小程序的`pageScrollTo`API可能需要配置`usePageScroll`属性 2. 弹窗内容高度建议使用`vh`单位适配不同屏幕 3. 安卓系统需测试滑动惯性滚动问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值