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

效果图:

我之前用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,一经查实,立即删除!

相关文章

centos7 开启防火墙关闭防火墙开机自启

centos7 开启防火墙永久 在CentOS 7中&#xff0c;可以使用firewalld来管理防火墙。以下是启用并设置防火墙为永久的步骤&#xff1a; 启动firewalld服务&#xff1a; sudo systemctl start firewalld 设置firewalld服务为开机自启&#xff1a; sudo systemctl enable firew…

探探各个微前端框架

本文作者为 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;则必须在另…

Centos7 k8s 集群 - Mysql主从架构

项目地址 MysqlCluster configMap mysql-configmap.yaml apiVersion: v1 kind: ConfigMap metadata:name: mysqllabels:app: mysql data:primary.cnf: |# 主节点MySQL的配置文件[mysqld]# 使用二进制日志文件的方式进行主从复制&#xff0c;这是一个标准的设置log-binrepli…

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

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

Spring Boot 3登录开发进阶:图形验证码接口的实现

内容简介 上文我们已经整合好了jwt,本文我们开始实现图形验证码接口的实现。 前置条件 本文衔接上文&#xff0c;请从上文开始 spring boot3登录开发(整合jwt)_springboot3 jwt-CSDN博客 图形验证码接口实现 1、导入工具依赖 pom.xml: <dependency> <groupId&g…

开发日志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;…

go的option模式

go的option模式 1.函数option 把option定义为函数。 package mainimport "fmt"// ServerConfig 定义服务器配置 type ServerConfig struct {Port intTimeout int }// Option 定义函数选项类型 type Option func(*ServerConfig)// WithPort 设置服务器端口 // 这…

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

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

ELK 企业级日志分析 ELFK

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

微服务支持平台--限流算法

微服务支持平台–限流 限流算法 限流算法&#xff1a; 算法含义备注令牌桶以恒定速度往一个桶内增加令牌&#xff0c;当桶内令牌满了后&#xff0c;就停止增加令牌适用于流量比较平稳的情况&#xff0c;只能承受小的突发流量滑动窗口将时间周期分为N个小周期&#xff0c;分别记…

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

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

Android进程类型及优先级(前台进程/可见进程/服务进程/缓存进程/空进程)

Android进程类型及优先级 一、Android 进程优先级 Android 进程优先级 :前台进程 > 可见进程 >服务进程 >缓存进程 > 空进程 ; 关键优先级进程 : 活动进程 ;高优先级进程 : 可见进程 , 服务进程 ;低优先级进程 : 后台进程 , 空进程 ; Android 系统中会尽量保证…

09 Php学习:数组和排序

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

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

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

【蓝桥杯每日一题】4.11 更小的数(不用区间DP)

题目来源&#xff1a; 蓝桥杯 2023 省 A]更小的数 - 洛谷 这题只需要用到双指针就OK~ 思路1&#xff1a; 翻转数组的子数组&#xff0c;然后进行比较大小将翻转后的数组存储在字符串 k k k中&#xff0c;然后将字符串 k k k与字符串 a a a进行逐一元素比较&#xff08;因为…

橘子学JDK之JMH-02(BenchmarkModes)

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

MySQL优化常见面试题

文章目录 1.在MySQL中如何定位慢查询2.SQL语句执行很慢&#xff0c;如何分析3.什么是索引4.索引的底层结构了解过嘛5.B树和B树的区别是什么6.什么是聚簇索引什么是非聚簇索引7.什么是回表查询8.什么是覆盖索引9.MySQL超大分页如何处理10.索引创建原则有哪些11.什么情况下索引会…