WeChatウィジェットWeChatウィジェット:カスタムポップアップレイヤ


カスタムポップアップレイヤ
ポップアップレイヤの内容.wxml
//     :bindtap="show"
 <view class="fenxiang-box">
    <image bindtap="show" src="/image/fenxiang-btn.png" class="fenxiang-btn">image>
  view>


//     ,   “   ”            :bindtap="hide"
<view class="modal-box" hidden="{{flag}}" bindtap="hide">

    <view class="modal-body">

      <view class="modal-content">
        <image src="/image/1.png" class="fenxiang">image>
        <button class="knowBtn" bindtap="hide">    button>
     view>
    view>
  view>

.wxss
.modal-box{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  background:rgba(0,0,0,0.4);
  overflow: hidden;
  }

.modal-body{
  position:relative;
  }

.modal-content{
  /* width: 60%; */
  margin:0 10% 0 30%;
  overflow: hidden;
  border-radius: 10rpx;}

.modal-content{
  width: 60%;
  height:150px; 
}
.modal-content .fenxiang{
  width: 100%;
  height: 40%;
}

.js
    data:{
         flag: true,
    },

  /**
   *      
   */
  //  
  show: function () {

    this.setData({ flag: false })

  },
  //  

  hide: function () {

    this.setData({ flag: true })

  },

効果: