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

使用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
    })
  },
相关推荐
游戏开发爱好者82 小时前
iPhone HTTPS 抓包实战指南,移动端加密流量分析、代理解密失败排查与底层数据流捕获
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090614 小时前
iOS 反编译防护工具全景解析 从底层符号到资源层的多维安全体系
android·安全·ios·小程序·uni-app·iphone·webview
何包蛋H18 小时前
医疗视频播放组件开发实战:支持病灶标注、缓存播放与性能优化
微信小程序·音视频·notepad++
毕设源码-钟学长21 小时前
【开题答辩全过程】以 基于微信小程序的记账系统为例,包含答辩的问题和答案
微信小程序·小程序
sheji341621 小时前
【开题答辩全过程】以 基于微信小程序的会议预定系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
计算机毕设指导61 天前
基于微信小程序的电子数据取证知识测试系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij idea
毕设源码-钟学长1 天前
【开题答辩全过程】以 基于微信小程序的汉服配饰交流平台为例,包含答辩的问题和答案
微信小程序·小程序
蓉妹妹1 天前
React微信小程序自定义tabbar
前端·react.js·微信小程序
2501_915918411 天前
iOS 应用如何防止破解?从逆向链路还原攻击者视角,构建完整的反破解工程实践体系
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007471 天前
iOS 压力测试的工程化体系 构建多工具协同的极限稳定性验证方案
android·ios·小程序·uni-app·压力测试·iphone·webview