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

效果图:

我之前用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;
}
相关推荐
Running_C3 分钟前
常见web攻击类型
前端·http
jackyChan3 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
lichenyang4533 分钟前
快速搭建服务器,fetch请求从服务器获取数据
前端
豆苗学前端8 分钟前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
光影少年9 分钟前
react16-react19都更新哪些内容?
前端·react.js
奇舞精选16 分钟前
用 AI 提效的新方式:全面体验 Google Gemini CLI
前端·google·ai编程
我命由我1234539 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO39 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了44 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅1 小时前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试