微信小程序彈出層點擊穿透問題

 

問題描述：使用小程序的modal組件實現遮罩層效果時，會出現滾動穿透的問題，即遮罩層后面的頁面依舊可以滾動。

解決方案：

　　給底層頁面動態添加 position:fixed;

 

代碼：

wxml：

<modal class="mask" wx:if="{{hasMask}}" bindtap='hideMask'>
    我是遮罩層
</modal>
<view style="background-color:#ccc;height:2000rpx{{hasMask?'position:fixed;':''}}width:100%;>
    小程序彈出層點擊穿透問題
    <button bindtap='showMask'>彈出遮罩層</button>
</view>

js：

Page({

  data: {
    hasMask:false
  },

  showMask(e) {
    //顯示遮罩
    this.setData({
      hasMask: true
    })
  },
  hideMask(e) {
    //隱藏遮罩
    this.setData({
      hasMask: false
    })
  }
}）

　　

效果圖：