彈出層的運用
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 })
}, ---------------------