微信小程序自定义关闭按钮在弹窗下面的效果

暴富的im

已于 2024-04-25 17:09:04 修改

阅读量670

点赞数 1

分类专栏：前端文章标签：微信小程序小程序前端

于 2024-04-11 10:43:21 首次发布

本文链接：https://blog.csdn.net/qq_59626859/article/details/137629196

版权

前端专栏收录该内容

69 篇文章 0 订阅

订阅专栏

效果图:

我之前用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  catchtouchmove="{{true}}" class="info-center" wx:if="{{showCode}}"  style="top:{{height*3}}px;height:{{height*3}}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;
}