欢迎光临,了解微信小程序开发,就上易用通!

微信小程序弹出层点击穿透问题

发布:2018-05-09 15:26浏览: 来源:网络 作者:cola

问题描述:

使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动。

 

解决方案:

给底层页面动态添加 position:fixed;

代码:

wxml:

 

				
  1. class="mask" wx:if="{{hasMask}}" bindtap='hideMask'>
  2. 我是遮罩层
  3.  
  4. style="background-color:#ccc;height:2000rpx{{hasMask?'position:fixed;':''}}width:100%;>
  5. 小程序弹出层点击穿透问题
  6. bindtap='showMask'>弹出遮罩层
  7.  

js:

 

				
  1. Page({
  2. data: {
  3. hasMask:false
  4. },
  5. showMask(e) {
  6. //显示遮罩
  7. this.setData({
  8. hasMask: true
  9. })
  10. },
  11. hideMask(e) {
  12. //隐藏遮罩
  13. this.setData({
  14. hasMask: false
  15. })
  16. }
  17. })

效果图:

微信小程序弹出层点击穿透问题(图1)






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。