<view class="saixuan" catchtap='clickPup'>触发</view>
<view class='bianji {{productLeiShow ? "hover" : ""}}' hover-stop-propagation='true'>
<view class="gaodu">出来</view>
</view>
<view catchtap='clickPup' class='bejingse {{productLeiShow ? "hover" : ""}}'></view>
// 用户点击显示弹窗
clickPup: function () {
var that = this;
var productLeiShow = that.data.productLeiShow;
if (productLeiShow) {
that.setData({
productLeiShow: 0,
})
} else {
that.setData({
productLeiShow: 1,
})
}
},
.saixuan{
width: 300rpx;
height: 100rpx;
border-radius: 50rpx;
background-color: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.bianji {
width: 100%;
position: fixed;
left: 0rpx;
top: 0rpx;
z-index: 999;
background-color: #fff;
border-radius: 0 0 40rpx 40rpx;
visibility: hidden;
transition: 0.5s;
margin-top: -100%;
padding-bottom: 40rpx;
}
.bianji.hover {
visibility: visible;
margin-top: 0;
}
.gaodu{
height: 200rpx;
}
.bejingse {
position: fixed;
left: 0rpx;
top: 0rpx;
z-index: 998;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
visibility: hidden;
transition: 0.5s;
}
.bejingse.hover {
visibility: visible;
}
到下面的样式中间会有个过度效果