记录微信小程序遮罩层
1，微信小程序的遮罩层一般都会产生穿透问题，大部分情况只要在遮罩层的最外级标签上加上
catchtouchmove="ture" 属性就没问题了，注意，这种在开发者工具上是看不到效果的，要在真机上查看
2，遮罩层无法覆盖微信小程序自带tabber的问题，微信小程序写在全局app.json中的tabber,级别最高，无法被遮罩，可以迂回，一是写自定义的tabber，而是使用小程序自带api,
wx.hideTabBar({}) 隐藏tabber导航
wx.showTabBar({}) 显示tabber导航
3，首次进入页面自己弹出的遮罩层，在页面刷新后和从另一个页面跳回此页面后遮罩层依旧弹出问题，一，将遮罩层弹出方法放在onshow中调用可以解决页面刷新弹出问题，但再次进入页面依旧后弹出，二，将方法在onready周期中调用只有在页面首次进入会执行方法
遮罩层的两种使用方式
一：点击遮罩区域就可以关闭遮罩层
首先定义一个遮罩层
<view class='mask' hidden='{{maskFlag}}' bindtap='yincang'></view>
css
.mask{
width:100%;
height:100%;
position:fixed;
">#999;
/* z-index:9999; */
top:0;
left:0;
opacity:0.5;
}
data公共数据中定义maskFlag:true,初始化隐藏状态
yincang:function(e){
console.log(e)
this.setData({
showModalStatus:false, //改变内容状态为隐藏
maskFlag: true, //改变遮罩层状态为隐藏
})
},
点击隐藏事件，改变其状态
定义需要隐藏的模块
<view wx:if="{{showModalStatus}}"></view>
data数据中定义showModalStatus:false 初始化隐藏
bindtap="setModalStatus" 点击事件，弹出遮罩层和内容
this.setData(
{
showModalStatus: true, //改变内容状态为显示
maskFlag: false, //改变遮罩层状态为显示
}
);
//使用到了wx:if和hidden的不同区别
二：通过点击事件控制遮罩层的显示和隐藏
页面设立需要弹出内容的点击事件
<view bindtap='showRule'></view>
显示隐藏的遮罩层
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}"></view> 通过css样式控制显示隐藏
/* 规则提示层 */
.isRuleShow{
display: block;
}
.isRuleHide{
display: none;
}
.ruleZhezhao{
height: 100%;
width: 100%;
position: fixed;
background-color：
rgba(0, 0, 0, .5);z-index: 2;
top: 0;
left: 0;
}
内容
<view class='ruleZhezhaoContent'></view>
.ruleZhezhaoContent{
padding: 20rpx 0;
width: 60%;
margin: 40% auto;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
top:-14%;
}
点击关闭遮罩层和内容的事件
bindtap='hideRule'
//打开规则提示
showRule: function () {
this.setData({
isRuleTrue: true
})
},
//关闭规则提示
hideRule: function () {
this.setData({
isRuleTrue: false
})
},
欢迎交流，不足之处多多指正
