• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

记录微信小程序遮罩层

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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
})
},
 
欢迎交流,不足之处多多指正
 
 
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap