微信小程序设置弹框底下内容不能移动 滚动(滚动穿透问题)

使用catchtouchmove="true",可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动,如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。

复制代码
<view class="modal" catchtouchmove="true">
    <view class="shade"></view>
    <view class="content"></view>
</view>

注意:模拟器是无法调试,要手机上才可测试出不能滚动

2、底部内容区使用scroll-view

设置垂直滚动,并将scroll-view的高度设置为屏幕高度,这样就可以实现弹窗自身内容滚动时,而底层内容不滚动。

复制代码
<scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
    底部内容
</scroll-view>
<view class="modal"></view>

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /*获取屏幕高度*/
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight
    })
  },
相关推荐
吴声子夜歌12 小时前
小程序——组件一
小程序
object not found14 小时前
微信小程序审核机制解析(2026 实践向总结)
微信小程序·小程序
吴声子夜歌15 小时前
小程序——组件二
小程序
linux_cfan15 小时前
**标题:20年研发经验总结:Notepad++ 高效文本排版与正则表达式进阶指南**
正则表达式·notepad++
JELEE.2 天前
原生微信小程序开发笔记
笔记·微信小程序
蓝黑20202 天前
从经纬度获取地理信息以及从地名获取经纬度
小程序
码云数智-园园3 天前
和小鹅通一样的平台有哪些
微信小程序
吴声子夜歌3 天前
小程序——逻辑层
小程序
花木偶3 天前
小迪网安:APP攻防-Day1
安全·小程序
吴声子夜歌4 天前
小程序——生命周期函数和事件处理函数
服务器·前端·小程序