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

打印 上一主题 下一主题

主题 882|帖子 882|积分 2646

 使用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企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

天空闲话

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表