自定义弹出层
弹出层内容.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 })
},
效果: