<!-- 气泡弹窗 -->
<view class="container" style="margin-top: 50px;">
<view class="r_box {{showView ? 'r_box-show' : 'r_box-hide'}}" bindtap="show">1111</view>
<button style="margin-top:50rpx;" bindtap="toggleView">点击</button>
</view>
Page({
data:{
showView:false
},
toggleView(){
this.setData({
showView:!this.data.showView
});
},
show(){
this.setData({
showView: false
});
}
})
.r_box {
width: 453rpx;
background: #e4c1c1;
border-radius: 14rpx;
box-sizing: border-box;
padding: 16rpx 28rpx 23rpx 29rpx;
position: relative;
margin-bottom: 60rpx;
}
.r_box::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 30rpx solid transparent;
border-right: 30rpx solid transparent;
border-top: 36rpx solid #e4c1c1;
left: 50%;
bottom: -50rpx;
transform: translate(-50%,-50%);
}
.r_box-show {
opacity:1;
transition: all .4s;
}
.r_box-hide {
opacity:0;
transition: all .4s;
}
标签:box,false,solid,微信,50%,showView,border,cv,气泡
From: https://blog.51cto.com/u_16268862/7593520