WeChatウィジェットWeChatウィジェット:カスタムポップアップレイヤ
カスタムポップアップレイヤ
ポップアップレイヤの内容.wxml
.wxss
.js
効果:
ポップアップレイヤの内容.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 })
},
効果: