ToB企服应用市场:ToB评测及商务社交产业平台

标题: 微信小程序设置弹框底下内容不能移动 滚动（滚动穿透问题） [打印本页]
作者: 天空闲话    时间: 2024-10-24 09:40
标题: 微信小程序设置弹框底下内容不能移动 滚动（滚动穿透问题）
 使用catchtouchmove="true"，可以实现弹框背景不滚动，但是也会导致弹框自身无法滚动，如果你的弹窗自己是不必要滚动的，用这个方法是极佳的。

  1. <view class="modal" catchtouchmove="true">
  2.     <view class="shade"></view>
  3.     <view class="content"></view>
  4. </view>
复制代码
注意：模仿器是无法调试，要手机上才可测试出不能滚动


2、底部内容区使用scroll-view

设置垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。
  1. <scroll-view class="container" scroll-y style="height:{{windowHeight}}px">
  2.     底部内容
  3. </scroll-view>
  4. <view class="modal"></view>
复制代码
  1. /**
  2.    * 生命周期函数--监听页面加载
  3.    */
  4.   onLoad: function (options) {
  5.     /*获取屏幕高度*/
  6.     this.setData({
  7.       windowHeight: wx.getSystemInfoSync().windowHeight
  8.     })
  9.   },
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4