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

使用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
    })
  },
相关推荐
YMZN911 小时前
基于SSM+小程序的童装商城管理系统(商城3)
小程序
计算机学姐3 小时前
基于uniapp微信小程序的旅游系统
vue.js·spring boot·mysql·算法·微信小程序·uni-app·旅游
计算机学姐4 小时前
基于uniapp微信小程序的宠物救助宠物领养系统
vue.js·spring boot·mysql·微信小程序·小程序·uni-app·宠物
赵锦川4 小时前
微信小程序 uniapp 腾讯地图的调用
微信小程序·小程序·uni-app
计算机学姐4 小时前
基于uniapp微信小程序的校园二手书交易系统
java·vue.js·spring boot·mysql·微信小程序·java-ee·uni-app
Prejudices13 小时前
Notepad++如何同时检索多个关键字
notepad++
360吹牛大王16 小时前
防伪溯源一体化管理系统源码
微信小程序·小程序·微信公众平台
你的万花筒19 小时前
【小程序上传图片封装2024,支持多图,带进度,上传头像】
小程序
paopaokaka_luck20 小时前
基于Spring Boot+Vue的健身房管理系统(协同过滤算法、功能非常多)
java·spring boot·小程序·毕业设计·1024程序员节