1. 程式人生 > >彈出層的運用

彈出層的運用

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

  }, ---------------------