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

使用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
    })
  },
相关推荐
niech_cn4 小时前
仿微信上传头像,实现拍摄、相册选择、手动缩放、裁剪、蒙版、撤回、还原、上传微信本地文件功能
微信·小程序
小旭@8 小时前
uniapp 微信小程序遇到的坑
微信小程序·uni-app
某公司摸鱼前端8 小时前
uniapp 支付宝小程序自定义 navbar 无效解决方案
小程序·uni-app
旧人238 小时前
微信小程序 首页之轮播图和搜索框 代码分享
微信小程序·小程序
hi星尘14 小时前
深度解析:基于Python的微信小程序自动化操作实现
python·微信小程序·自动化
人工智能的苟富贵17 小时前
微信小程序直传阿里云 OSS 实践指南(V4 签名 · 秒传支持 · 高性能封装)
阿里云·微信小程序·小程序
时之彼岸Φ18 小时前
Fiddler+Yakit实现手机流量抓包和小程序抓包
智能手机·小程序·fiddler
换日线°18 小时前
微信小程序根据图片生成背景颜色有效果图
微信小程序
suncentwl19 小时前
为什么选择有版权的答题pk小程序
小程序·答题小程序·答题pk
小旋风0123420 小时前
uniapp自定义头部(兼容微信小程序(胶囊和状态栏),兼容h5)
微信小程序·uni-app·notepad++