微信小程序实现常见弹出层效果
其实这个效果实现起来很简单，就是通过三目运算符来控制遮罩层的显示和隐藏
直接贴代码
wxml：
<text class=rule bindtap=showRule>打开</text>
<!-- 规则提示 -->
<view class="ruleZhezhao {
{isRuleTrue?isRuleShow:isRuleHide}}">
<image src=../../images/rule-hide.png class=ruleHide bindtap=hideRule>关闭</image>
</view>
<!-- end -->
wxss:
/* 规则提示层 */
.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;
}
/* end */
js:
打开：
//打开规则提示
showRule: function () {
this.setData({
isRuleTrue: true
})
},
关闭：
//关闭规则提示
hideRule: function () {
this.setData({
isRuleTrue: false
})
},
上一篇：
uniapp开发微信小程序-2.页面制作
下一篇：
微信中调起支付宝支付