效果图:
我之前用vant 的popup的弹窗写,会出现close图标移动到弹窗内容外部不可见。
自定义代码:
popup.JS
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
//自定义弹窗 动态获取屏幕高度
var that = this;
wx.getSystemInfo({
success: (result) => {
that.setData({
height: result.windowHeight
});
},
})
},
closePopup 关闭自定义弹窗
closePopup(){
this.setData({
showCode:false
})
}
data(){
height:'',
showCode:false
}
popup.wxml
<view catchtouchmove="{{true}}" class="popup-box" wx:if="{{showCode}}" bindtap="closePopup"></view>
<view class="info-center" wx:if="{{showCode}}" style="top:{{height*0.25}}px;height:{{height*0.4}}px;" >
<image src="../../static/market/market-tianmu-code.png" class="out-adv" mode="widthFix"></image> 弹窗内容,我比较懒切的图
<image src="https://xxx.com/close.png" class="close-icon" mode="widthFix" bindtap="closePopup"></image>
</view>
</view>
popup.wxss
/* 蒙层 */
.popup-box{
position: fixed;
z-index: 998;
top: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}
/* 中 */
.info-center{
position: fixed;
z-index: 999;
background-color: none;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 10rpx;
width: 90%;
gap: 20px;
margin-left: 5%;
margin-right: 5%;
}
.close-icon{
width: 50rpx;
height: 50rpx;
position: absolute;
bottom: -70rpx;
left: 50%;
margin-left: -25rpx;
}