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

使用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
    })
  },
相关推荐
说私域10 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的社群初期运营策略研究
人工智能·小程序
计算机毕设指导611 小时前
基于微信小程序的校园物品租赁与二手交易系统【源码文末联系】
spring boot·mysql·微信小程序·小程序·tomcat·maven·intellij-idea
科技小金龙11 小时前
小程序/APP接入分账系统:4大核心注意事项,避开合规与技术坑
大数据·人工智能·小程序
说私域11 小时前
开源AI智能名片链动2+1模式商城小程序的“展现”策略研究
人工智能·小程序
计算机毕设指导612 小时前
基于微信小程序的水上警务通系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
风月歌15 小时前
小程序项目之校园二手交易平台小程序源代码(源码+文档)
java·数据库·mysql·小程序·毕业设计·源码
李慕婉学姐16 小时前
【开题答辩过程】以《基于uni-app框架的助学管理系统的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
微信小程序·uni-app
爱吃的强哥16 小时前
uni-app 开发微信小程序注意点
微信小程序·小程序·uni-app
禾高网络1 天前
互联网医院系统,互联网医院系统核心功能及技术
java·大数据·人工智能·小程序