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

使用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
    })
  },
相关推荐
梓彤科技19 小时前
登录状态总是失效,武汉小程序开发怎样设计会话续期与接口鉴权?
微信小程序·小程序·登录鉴权
黑马程序员毕设20 小时前
非遗文化展览系统设计与实现
人工智能·spring boot·后端·微信小程序·毕设
维双云21 小时前
专业开发小程序公司有哪些:从项目交付能力判断服务商
小程序
show43321 小时前
2026多格式导出技术方案:小程序端免费TXT/Word/SRT生成实践
小程序·word
维双云1 天前
社区生鲜小程序怎么做?4个经营环节。
小程序·零售
2601_949950632 天前
成绩提升不靠盲目刷题:用练题簿找准真正的薄弱知识点
学习·小程序·刷题·小程序推荐
今日热点2 天前
微信小程序主体变更公证全流程实操解析:场景条件、材料规范、驳回避坑与Python校验脚本实现
python·微信小程序·小程序
Buke..2 天前
【小程序逆向】某游快爆 AI 逆向 sign参数:AI 辅助分析与 MCP 工具链实战
前端·人工智能·爬虫·python·小程序·notepad++
T01156182 天前
艺培场馆课时预约小程序用户端 & 后台联动踩坑上篇(预约、课时、缓存、消息、学员端自身问题)
java·缓存·小程序·bug·全栈项目实战手记·艺培课时系统‘’