微信小程序解决自定义弹出层滑动时,下层页面滚动问题

本文探讨了微信小程序中自定义弹出层滑动时导致下层页面滚动的问题及解决方案。针对弹窗内无滚动内容,可通过在弹窗外层阻止touchmove事件。若弹窗内有滚动内容,可动态添加no-scroll样式来隐藏下层页面。另外,使用scroll-view组件配合控制属性解决滑动问题,但可能会影响页面的上拉触底和下拉刷新事件,可通过监听bindscroll事件来模拟这些功能。

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

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。

场景一:弹窗内无滚动内容

可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡)。

简单写法:catchtouchmove='preventTouchMove',在js文件中定义一个方法preventTouchMove() { return } 即可。

此种方式会阻止弹窗内内容的滚动。

场景二:弹窗内有滚动内容

在弹窗外层根元素动态添加一个no-scroll样式,定义no-scroll为{height: 100%; overflow: hidden;}

当需要阻止滑动的弹窗显示时添加no-scroll,弹窗关闭去掉no-scroll即可。

此种方式的缺点是当弹窗显示增加no-scrll后弹窗下面的页面会回到顶部。

场景三:

WXML

将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false

<scroll-view scroll-y="{ {showModalStatus?'true':'false'}}" style="height:{ {windowHeight}}px"> </scroll-view>

WXSS

Page 设置为绝对定位,宽高各百分之百 , scroll-view 高度 百分之百

Page{
  position: absolute;
  width: 100%;
  height: 100%;
  displa
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值