您的位置:首页 > 移动开发 > 微信开发

微信小程序 —— 解决自定义弹窗出现后,蒙层下的页面仍可以滚动的问题

2017-11-30 09:54 726 查看
在微信小程序开发中,会碰到自定义弹窗出现后,蒙层下面的页面仍可以滚动的问题。

例如:




解决方法:

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) {

},


【这样子设置虽然在微信开发者工具上仍然可以滑动,但是在真机上却不可以滑动。】
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐