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

效果图:

我之前用vant 的popup的弹窗写,会出现close图标移动到弹窗内容外部不可见。

自定义代码:
javascript 复制代码
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;
}
相关推荐
该用户已不存在几秒前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵3 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius3 分钟前
Unity URP管线着色器库攻略part1
前端
Xy9106 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala8 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy9 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101011 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日12 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子13 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试
浅忆无痕14 分钟前
Flutter抓包
前端·flutter