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

效果图:

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

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探探各个微前端框架

本文作者为 360 奇舞团前端开发工程师 微前端架构是为了在解决单体应用在一个相对长的时间跨度下&#xff0c;由于参与的人员、团队的增多、变迁&#xff0c;从一个普通应用演变成一个巨石应用(Frontend Monolith)后&#xff0c;随之而来的应用不可维护的问题。这类问题在企业级…

【ELFK】Filebeat+ELK 部署

FilebeatELK 部署 Node1节点&#xff08;2C/4G&#xff09;&#xff1a;node1/192.168.67.11 Elasticsearch Kibana Node2节点&#xff08;2C/4G&#xff09;&#xff1a;node2/192.168.67.12 Elasticsearch Apache节点&#xff1a;apache/192.168.67.10 …

linux学习:队列

目录 顺序队列 管理结构体设计 初始化 入队 出队 链式队列 例子 用户输入整数则入队&#xff0c;字母则出队 我们对队列里的元素操作是有严格限制的&#xff1a;插入一个新节点&#xff0c;必须插入到 指定的一端&#xff0c;而删除一个已有节点&#xff0c;则必须在另…

掌握 C# 爬虫技术:使用 HttpClient 获取今日头条内容

摘要/导言&#xff1a; 在本文中&#xff0c;我们将探讨如何使用 C# 中的 HttpClient 类和爬虫代理IP技术来获取今日头条的内容。我们还将实现多线程技术&#xff0c;以提高数据采集的效率。 背景/引言&#xff1a; 随着信息时代的到来&#xff0c;数据已经成为了一种非常宝…

开发日志2024-04-11

开发日志2024/04/11 1、会员/普通用户预约完成后&#xff0c;技师对应的积分添加预约完成的项目价格添加到统计表的业绩字段中&#xff0c;同时对应的服务次数字段1 实现代码&#xff1a; 前端 shHandler(){this.$confirm(确定操作?, "提示", {confirmButtonText…

HarmonyOS实战开发-拼图、如何实现获取图片,以及图片裁剪分割的功能。

介绍 该示例通过ohos.multimedia.image和ohos.multimedia.mediaLibrary接口实现获取图片&#xff0c;以及图片裁剪分割的功能。 效果预览 使用说明&#xff1a; 使用预置相机拍照后启动应用&#xff0c;应用首页会读取设备内的图片文件并展示获取到的第一个图片&#xff0c;…

word中插入mathtype版的符号后,行间距变大解决方法

问题 解决方法 选中该段&#xff0c;设置固定值行距。如果是宋体&#xff0c;小四&#xff0c;1.25行距&#xff0c;那么固定值就为20磅。 成功解决。

ELK 企业级日志分析 ELFK

一 ELK 简介 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logstash 和 Kiabana 三个开源 工具配合使用&#xff0c; 完成更强大的用户对日志的查询、排序、统计需求。 1 ElasticSearch&#xff1a; 是基于Lucene&#xff08;一个全文检索引擎的…

Java后端基础知识(String类型)

String类的创建方式 String的特点 1.引用数据类型 2.是final类&#xff0c;一旦创建内容不可修改 3.String类对象相等的判断用equals&#xff08;&#xff09;方法完成&#xff0c;是判断地址数值 String的创建方式 1.直接创建 String str"hello";注意&#xff…

09 Php学习:数组和排序

数组概念 在PHP中&#xff0c;数组是一种复合数据类型&#xff0c;用于存储多个值。以下是关于PHP数组的详细解释&#xff1a; 索引数组&#xff1a;索引数组是最基本的数组类型&#xff0c;其中每个元素都有一个唯一的数字索引&#xff0c;从0开始递增。 关联数组&#xff…

Android Studio开发学习(七)———RelativeLayout(相对布局)

在上期中我们对LinearLayout进行了详细的解析&#xff0c;LinearLayout也是我们用的比较多的一个布局,更多的时候更钟情于它的 weight(权重) 属性&#xff0c;等比例划分&#xff0c;对屏幕适配还是 帮助蛮大的;但是使用LinearLayout的时候也有一个问题&#xff0c;就是当界面比…

橘子学JDK之JMH-02(BenchmarkModes)

一、案例二代码 这次我们来搞一下官网文档的第二个案例&#xff0c;我删除了一些没用的注释&#xff0c;然后对代码做了一下注释的翻译&#xff0c;可以看一下意思。 package com.levi;import org.openjdk.jmh.annotations.*; import org.openjdk.jmh.runner.Runner; import …

【算法练习】29:插入排序学习笔记

一、插入排序的算法思想 原理&#xff1a;将一个无序的数据序列逐步转化为有序序列。算法将待排序的数组分为两个部分已排序部分和未排序部分。 时间复杂度&#xff1a;插入排序的时间复杂度在最坏、平均和最好情况下的表现相同&#xff0c;均为 &#xff0c;其中 n 是待排序数…

极狐GitLab对接OAuth2实现SSO

本文作者&#xff1a;极狐(GitLab) 高级解决方案架构师 武让 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 企…

Python处理PDF:在PDF文档中插入页眉和页脚

在处理篇幅较长、结构复杂的PDF文档时&#xff0c;页眉和页脚的设计与插入就显得尤为重要。它们不仅扮演着美化文档、提升专业度的角色&#xff0c;更承担了导航指引、信息标注的重要功能。 页眉通常用于展示文档的标题或章节名称&#xff0c;有助于读者在翻阅过程中迅速定位所…

Java - 赋值运算符

在这个实战中&#xff0c;我们将学习赋值运算符的使用方法。首先&#xff0c;我们将介绍简单赋值运算符的基本概念和语法格式。然后&#xff0c;我们将通过案例演示来加深对赋值运算符的理解。接下来&#xff0c;我们将对比Java和Python这两种不同的编程语言&#xff0c;探讨它…

电能质量管理解决方案探讨 安科瑞 许敏

电能质量在线监测装置 本办法对发电企业&#xff08;包括分布式电源&#xff09;、电网企业、用电企业的电能质量管理均有明确要求&#xff0c;要求在发电企业并网点、电网企业非线性设施、用电企业公共连接点设置电能质量监测装置&#xff0c;这会促进市场对电能质量在线监测…

理解 编译和链接

目录 1. 翻译环境和运行环境 2. 翻译环境 2.1 预处理&#xff08;预编译&#xff09; 2.2 编译 2.2.1 词法分析&#xff1a; 2.2.2 语法分析 2.2.3 语义分析 2.3 汇编 2.4 链接 3. 运行环境 1. 翻译环境和运行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同…

Linux开发--进程

经典五问&#xff1a; 1.什么是程序&#xff1f;什么是进程&#xff1f; 从是否运行进行判断: gcc xxx -o pro&#xff0c;磁盘中生成的pro文件&#xff0c;就是程序 进程是程序一次运行活动 程序是静态的概念&#xff0c;进程是动态的概念。 2.如何查看系统中的进程: 在l…

二叉树练习day.6

654.最大二叉树 链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前…