小程序底部弹出框效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hhy2014yatan/article/details/82048301

问题描述：点击使用说明，弹出消息框，显示相关信息

（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 })
  }