1. 程式人生 > >微信小程式 —— 解決自定義彈窗出現後,蒙層下的頁面仍可以滾動的問題

微信小程式 —— 解決自定義彈窗出現後,蒙層下的頁面仍可以滾動的問題

在微信小程式開發中,會碰到自定義彈窗出現後,蒙層下面的頁面仍可以滾動的問題。

例如:

這裡寫圖片描述

解決方法:

1. 先點擊出現蒙層時,頁面的最外層view:height:100vh (靈活設定,蒙層出現時height:100vh;,反之height: ;)
    微信小程式中的vw和vh單位
    100vh 微信小程式的螢幕高度;
    100vw微信小程式的螢幕寬度
2. 在蒙層的最外層view中加入catchtouchmove=”preventTouchMove”
    -wxml
 <view class="Montmorillonitelayer" catchtouchmove
="preventTouchMove" style="
{{show?'':'display:none'}}"> </view> <view class="Montmorillonitelayer-content" style="{{show?'':'display:none'}}"> <form bindsubmit="formSubmit"> <view style="text-align:center;padding:5% 0;border-bottom:1px solid #eee;font-size:15px;"
>
新增評論</view> <input name="pinglun" placeholder='請輸入您的評論'></input> <button formType="submit">提交</button> </form> </view>
-js 中寫一個空白函式
  preventTouchMove:function(e) {

  },
【這樣子設定雖然在微信開發者工具上仍然可以滑動,但是在真機上卻不可以滑動。】