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

使用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
    })
  },
相关推荐
wxwx_bscxy32211 小时前
基于Python新冠疫情可视化分析系统的设计与实现
java·数据库·spring boot·python·微信小程序·sqlite
www_aiyuanma_vip16 小时前
信息安全小卫士
小程序
梦幻通灵20 小时前
NotePad++将列转行实现方案
notepad++
www_aiyuanma_vip21 小时前
家乡介绍小程序
小程序·notepad++
www_aiyuanma_vip21 小时前
信息安全小卫士(深色系版本)
小程序
博、、1 天前
智慧场馆小程序系统实战指南:从架构设计到落地部署
小程序
冠品科技-小程序开发1 天前
做实体的,盲盒玩法别只停留在线下
小程序·软件构建·个人开发·软件需求
2501_915106321 天前
iOS数据采集技术详解:从性能监控到崩溃分析的全链路实践
android·ios·小程序·https·uni-app·iphone·webview
黑马程序员毕设2 天前
基于Java的医院药品管理系统的优化设计与实现
java·开发语言·spring boot·小程序·架构·课程设计·毕设
数字游民95272 天前
史诗级更新:微信小程序支持个人主体接入虚拟支付
ai·微信小程序·小程序·opc·数字游民9527