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

效果图:

我之前用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;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/535838.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何排查k8s集群中Pod内mysqld进程占用内存消耗过高?

文章目录 1. **查看容器资源使用情况**&#xff1a;2. **进入容器内部**&#xff1a;3. **检查进程内存使用**&#xff1a;4. **MySQL服务器状态检查**&#xff1a;5. **MySQL日志分析**&#xff1a;6. **使用专门的MySQL监控工具**&#xff1a;7. **配置文件检查**&#xff1a…

一个PDF文件含有多篇不同的内容,如何把这些内容分离出来?

一&#xff0c;PDF的含义 PDF&#xff0c;全称Portable Document Format&#xff0c;即便携式文档格式&#xff0c;是一种由Adobe Systems开发的文件格式&#xff0c;用于呈现文档&#xff0c;包括文本、图像、向量图形、字体、颜色、页面布局等&#xff0c;并可在不同的操作系…

LLMs之ToolAlpaca:ToolAlpaca(通用工具学习框架/工具使用语料库)的简介、安装和使用方法、案例应用之详细攻略

LLMs之ToolAlpaca&#xff1a;ToolAlpaca(通用工具学习框架/工具使用语料库)的简介、安装和使用方法、案例应用之详细攻略 目录 ToolAlpaca的简介 0、《ToolAlpaca: Generalized Tool Learning for Language Models with 3000 Simulated Cases》翻译与解读 1、数据集列表 2…

PDF文件内容可以转成word版本吗?答案是肯定的 PDF转word的方法

一&#xff0c;PDF转Word的必要性 随着信息技术的飞速发展&#xff0c;文档的格式和转换成为了我们日常生活和工作中不可避免的一部分。其中&#xff0c;PDF转Word的需求尤为突出。PDF作为一种跨平台的文档格式&#xff0c;具有阅读效果好、不易被篡改等优点&#xff0c;但在编…

科技论文和会议录制高质量Presentation Video视频方法

一、背景 机器人领域&#xff0c;许多高质量的期刊和会议&#xff08;如IEEE旗下的TRO&#xff0c;RAL&#xff0c;IROS&#xff0c;ICRA等&#xff09;在你的论文收录后&#xff0c;需要上传一个Presentation Video材料&#xff0c;且对设备兼容性和视频质量有较高要求&#…

个人劳保用品穿戴检测系统 安全帽、工服、面罩、防护手套、防护鞋、安全背带穿戴检测等

背景 在工业生产、医疗护理、消防救援等高风险领域&#xff0c;正确穿戴个人防护装备或劳保用品&#xff08;PPE&#xff1a;Personal Protective Equipment&#xff09;是保障人员安全的重要措施&#xff0c;如安全帽、反光衣、安全背带等。然而&#xff0c;现实中往往会出现…

最新ChatGPT网站系统源码Midjourney-AI绘画,GPTs,AI换脸支持

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…

微服务学习(黑马)

学习黑马的微服务课程的笔记 导学 微服务架构 认识微服务 SpringCloud spring.io/projects/spring-cloud/ 服务拆分和远程调用 根据订单id查询订单功能 存在的问题 硬编码 eureka注册中心 搭建eureka 服务注册 在order-service中完成服务拉取 Ribbon负载均衡 Nacos注册中心…

mars3d.MaterialType.Image2修改配置面状:图片2的speed数值实现动画效果说明

摘要&#xff1a; mars3d.MaterialType.Image2修改配置面状&#xff1a;图片2的speed数值实现动画效果说明 前提&#xff1a; 1.在示例中&#xff0c;尝试给mars3d.MaterialType.Image2材质的图片加上speed参数&#xff0c;实现动画效果&#xff0c;但是没有看到流动效果说明…

AI工具导航网站比较分析

介绍 本篇博客将从FutureTools和GPT-3 Demo两个AI工具导航网站出发&#xff0c;进行全面比较分析&#xff0c;为读者提供深入了解和选择适合需求的信息。同时针对需求提供标题和内容。 标题 "AI工具导航网站&#xff1a;FutureTools与GPT-3 Demo的全面比较分析" 内容…

背 单 词 (考研词汇闪过)

单词&#xff1a; 买考研词汇闪过 研究艾宾浩斯遗忘曲线 https://www.bilibili.com/video/BV18Y4y1h7YR/?spm_id_from333.337.search-card.all.click&vd_source5cbefe6dd70d6d84830a5891ceab2bf9 单词方法 闪记背两排&#xff08;5min&#xff09;重复一遍&#xff08;2mi…

MySQL数据库的详解(1)

DDL&#xff08;数据库操作&#xff09; 查询 查询所有数据库&#xff1a;show databases;当前数据库&#xff1a;select database(); 创建 创建数据库&#xff1a;create database [ if not exists] 数据库名 ; 使用 使用数据库&#xff1a;use 数据库名 ; 删除 删除数…

Nginx 基础应用实战 06 构建一个PHP的站点

Nginx 基础应用实战 06 构建一个PHP的站点 使用套件 lmnp https://oneinstack.com 安装完成后 搭建bbs https://www.discuz.net/ 搭建博客 https://wordpress.com https://cn.wordpress.org/ CMS系统 http://www.dedecms.com/ 构建Lua站点 Openresty Nginx Lua …

【强化学习实践】Gym+倒立单摆+创建自己的环境

一、Gym Gym是OpenAI开发的一个强化学习算法测试环境集合包。Gym提供了多种标准的环境&#xff0c;包括经典的游戏&#xff08;如Atari游戏&#xff09;、机器人模拟任务以及其他各种类型的问题&#xff0c;供开发者测试和训练强化学习智能体。在Gym环境中&#xff0c;开发者可…

2024最新AI系统【SparkAI】,ChatGPT商业运营版系统源码/ai问答/ai绘画/GPTs,SunoAI音乐生成大模型/带分销AIGC搭建部署教程

一、文章前言 SparkAi创作系统是基于ChatGPT进行开发的ai智能问答系统和Midjourney-AI绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已…

利用Python实现可视化交互界面:Dash

Dash是一个低代码数据框架&#xff0c;用Python实现可视化交互界面&#xff0c;不用写Javascript&#xff0c;开源&#xff0c;支持回调、HTML组件等功能。 安装 pip install dash使用 # Import packages from dash import Dash, html, dash_table, dcc, callback, Output, …

MySQL压力测试最佳实践(16/16)

MySQL压力测试 基本概述 sysbench是一个模块化的、跨平台、多线程基准测试工具&#xff0c;主要用于评估测试各种不同系统参数下的数据库负载情况。项目地址&#xff1a;http://github.com/akopytov/sysbench 工具安装 1.1 在线安装&#xff08;CentOS&#xff09;&#xf…

Leetcode110_平衡二叉树

1.leetcode原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题目描述 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;…

OJ刷题日记:1、双指针(1)

目录 1、283.移动零 2、1089.复写零 3、202.快乐数 1、283.移动零 题目&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 …

牛客小白月赛90(A,B,C,D,E,F)

比赛链接 官方题解&#xff08;视频&#xff09; 这场偏思维&#xff0c;感觉好像没啥算法。E需要动态维护前 k k k 小&#xff0c;F是个离散化加dp&#xff0c;状态和递推方程比较 非常规&#xff0c;建议还是看一下涨涨姿势。 A 小A的文化节 思路&#xff1a; 签到 cod…