问题描述:点击使用说明,弹出消息框,显示相关信息
(1)wxml页面
<view class='explain' bindtap="show">
<text class='explain_b'>使用说明</text>
</view>
<view class="explain-box" hidden="{{flag}}" bindtap="hide">
<view class='explain_body'>
<block wx:for="{{explainItems}}" wx:key="Id">
<text class='explain_item'>{{item.comment}}</text>
</block>
<button class="close" bindtap="hide">关闭</button>
</view>
</view>
(2)wxss页面
.explain_body{
position: fixed;
bottom: 0rpx;
background: white;
padding-top: 20rpx;
}
.explain_item{
margin-bottom: 16rpx;
font-size: 28rpx;
font-weight: 560;
line-height: 34rpx;
}
.explain-box{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
overflow: hidden;
z-index: 2000;
}
(3)js页面
flag: true,
show: function () {
this.setData({ flag: false })
},
//消失
hide: function () {
this.setData({ flag: true })
}