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

使用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
    })
  },
相关推荐
爱折腾的编程老炮3 小时前
潮玩品牌自建抽盒机小程序——商城 + 抽盒 + 一番赏 + 会员 + 社区,一套代码怎么搭
spring boot·小程序·vue·mybatis·uniapp
新知图书3 小时前
第13章 从一句话需求到上线“续费管家”小程序
人工智能·小程序·智能体
数商云企12 小时前
2026年陕西软件开发首选数商云企AI微入口小程序定制方案
人工智能·小程序
姜穆澜14 小时前
OneID 从 0 到 1 完整生产案例(五)
大数据·notepad++
bug总结18 小时前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
Quor19 小时前
小程序工作室:AI 生成即运行的可视化工作台
人工智能·小程序
盟道科技1 天前
小程序电商订单超时自动取消的三种实现方案:定时扫描、Redis 过期监听、延迟消息对比与生产落地
数据库·redis·小程序
lhldsg1 天前
智慧场馆解决方案小程序系统:从架构设计到落地实践
java·小程序·需求分析
凉红茶1 天前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程
CRMEB系统商城1 天前
汽车养护连锁的数字化底座CRMEB 多门店系统实战方案
java·开发语言·小程序·开源·汽车