微信小程序遮罩层显示

效果展示:

wxml页面:

<view class='modal-mask' wx:if='{{showModal}}'><view class="modal-container"><view class='modal-content'></view><view class='modal-footer' bindtap="closeImage">//这个/images/index/close.png的路径是关闭按钮图片,本人从阿里矢量图网站下载根据自己需求寻找,存入本地即可<image src="/images/index/close.png"  style="width: 80rpx; height: 80rpx;"/></view></view>
</view>

wxss页面:

/*遮罩层*/
.modal-mask {display: flex;justify-content: center;align-items: center;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.8);z-index: 999;
}.modal-container {display: flex;flex-direction: column;
}/*遮罩内容*/
.modal-content {display: flex;flex-direction: column;width: 100vw;height: 450rpx;background-image: url(https://xxx/library/xcx_pop_img/xxx.jpg);        //图片路径,根据自己的写background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;
}.modal-footer {height: 80rpx;width: 100%;margin-top: 80rpx;text-align: center;
} 

js页面:

data: {showModal:true,   //弹窗显示},
// 关闭弹窗closeImage:function(e) {this.setData({showModal:false})},

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

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

相关文章

Nettyの网络聊天室扩展序列化算法

1、网络聊天室综合案例 客户端初始代码&#xff1a; Slf4j public class ChatClient {public static void main(String[] args) {NioEventLoopGroup group new NioEventLoopGroup();LoggingHandler LOGGING_HANDLER new LoggingHandler(LogLevel.DEBUG);MessageCodecSharabl…

searchForm自适应布局 + 按钮插槽

收起 展开 代码&#xff1a; useResizeObserverHooks.js import { useEffect, useLayoutEffect } from "react";export const useResizeObserver (containerDom, domClass, callback) > {useLayoutEffect(() > {let resizeObserver null;let dom null;if …

Map Set(Java篇详解)

&#x1f341; 个人主页&#xff1a;爱编程的Tom&#x1f4ab; 本篇博文收录专栏&#xff1a;Java专栏&#x1f449; 目前其它专栏&#xff1a;c系列小游戏 c语言系列--万物的开始_ 等 &#x1f389; 欢迎 &#x1f44d;点赞✍评论⭐收藏&#x1f496;三连支持…

代谢组数据分析(十二):岭回归、Lasso回归、弹性网络回归构建预测模型

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者Xiao hong书:生信学习者知hu:生信学习者CDSN:生信学习者2介绍 在代谢物预测模型的构建中,我们采用了三种主流的回归分析方法:岭回归、Lasso回归以及弹性网络回归。这三种方法各有其独特的原理和适用场景,因此在…

WPS操作技巧:制作可以打对勾的方框,只需简单几步!沈阳wps办公软件培训

日常工作中&#xff0c;我们经常需要在表格中添加复选框&#xff0c;比如【性别选择】、【任务完成状态】等等&#xff0c;通过打对勾来确定状态。今天就分别从WPS的Excel表格和Word文档2种场景&#xff0c;介绍制作可以打对勾的复选框的方法技巧&#xff0c;掌握技巧&#xff…

游戏AI的创造思路-技术基础-计算机视觉

让游戏的AI具备“眼睛”和“视觉”&#xff0c;就是通过计算机视觉的方法进行的。现在&#xff0c;越来越多的游戏&#xff0c;特别是动捕类游戏都在使用这个方法。当然&#xff0c;计算机视觉不仅仅用于游戏&#xff0c;越来越多的应用使用到这个技术 目录 1. 定义 2. 发展历…

腾讯混元文生图开源模型推出小显存版本,6G显存即可运行,并开源caption模型

7月4日&#xff0c;腾讯混元文生图大模型&#xff08;混元DiT&#xff09;宣布开源小显存版本&#xff0c;仅需6G显存即可运行&#xff0c;对使用个人电脑本地部署的开发者十分友好&#xff0c;该版本与LoRA、ControlNet等插件&#xff0c;都已适配至Diffusers库&#xff1b;并…

探索 Apache Paimon 在阿里智能引擎的应用场景

摘要&#xff1a;本文整理自Apache Yarn && Flink Contributor&#xff0c;阿里巴巴智能引擎事业部技术专家王伟骏&#xff08;鸿历&#xff09;老师在 5月16日 Streaming Lakehouse Meetup Online 上的分享。内容主要分为以下三个部分&#xff1a; 一、 阿里智能引擎…

LVS+Nginx高可用集群--基础篇

1.集群概述 单体部署&#xff1a; 可以将上面内容分别部署在不同的服务器上。 单体架构的优点&#xff1a; 小团队成型就可完成开发&#xff0c;测试&#xff0c;上线 迭代周期短&#xff0c;速度快 打包方便&#xff0c;运维简单 单体架构的挑战&#xff1a;单节点宕机造成…

DVWA sql手注学习(巨详细不含sqlmap)

这篇文章主要记录学习sql注入的过程中遇到的问题已经一点学习感悟&#xff0c;过程图片会比较多&#xff0c;比较基础和详细&#xff0c;不存在看不懂哪一步的过程 文章目录 靶场介绍SQL注入 lowSQL注入 MediumSQL注入 HighSQL注入 Impossible 靶场介绍 DVWA&#xff08;Damn…

必备的 Adobe XD 辅助工具

想要高效便捷的使用 Adobe XD&#xff0c; Adobe XD 插件是必不可少的&#xff0c; Adobe XD 的插件非常多&#xff0c;但 90%都是英文&#xff0c;并且良莠不齐。在这儿挑选 9 个好用的 Adobe XD 插件给大家&#xff0c;这里是我整理的一些实用 Adobe XD 插件&#xff0c;让你…

大屏开发系列——Echarts的基础使用

本文为个人近期学习总结&#xff0c;若有错误之处&#xff0c;欢迎指出&#xff01; Echarts在vue2中的基础使用 一、简单介绍二、基本使用&#xff08;vue2中&#xff09;1.npm安装2.main.js引入3.使用步骤(1)准备带有宽高的DOM容器&#xff1b;(2)初始化echarts实例&#xff…

PHP宜邦家政服务管理系统-计算机毕业设计源码04426

目 录 摘要 1 绪论 1.1 选题背景与意义 1.2开发现状 1.3论文结构与章节安排 2 宜邦家政服务管理系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用…

国标GB28181视频汇聚平台LntonCVS视频监控安防平台与国标协议对接解决方案

应急管理部门以“以信息化推动应急管理能力现代化”为总体目标&#xff0c;加快现代信息技术与应急管理业务深度融合&#xff0c;全面支持现代应急管理体系建设&#xff0c;这不仅是国家加强和改进应急管理工作的关键举措&#xff0c;也是应对日益严峻的应急管理形势和满足公众…

微信小程序的运行机制与更新机制

1. 小程序运行机制 1.1. 冷启动与热启动 冷启动为用户第一次打开小程序时&#xff0c;因为之前没有打开过&#xff0c;这是第一种冷启动的情兑。第二种情况为虽然之前用户打开过&#xff0c;但是小程序被用户主动的销毁过&#xff0c;这种情况下我们再次打开小程序&#xff0…

【PALM、WRF-LES】微尺度气象数值模拟—大涡模拟技术

针对微尺度气象的复杂性&#xff0c;大涡模拟&#xff08;LES&#xff09;提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟&#xff0c;这些过程往往与天气模式、地形影响和人为因素如城市布局紧密相关。在这种规模上&#xff0c;传统的气象模…

doc文档下载

目录 下载 安装谷歌浏览器(chrome)Microsoft Edge浏览器 常见问题 下载 见邮件附件 安装 谷歌浏览器(chrome) 打开浏览器&#xff0c;地址栏输入&#xff1a;chrome://extensions/ 右上角打开开发者模式 点击如上图左上角的加载已解压的拓展程序&#xff0c;并选择刚刚解压…

安卓应用开发学习:通过腾讯地图SDK实现定位功能

一、引言 这几天有些忙&#xff0c;耽误了写日志&#xff0c;但我的学习始终没有落下&#xff0c;有空我就会研究《 Android App 开发进阶与项目实战》一书中定位导航方面的内容。在我的手机上先后实现了“获取经纬度及地理位置描述信息”和“获取导航卫星信息”功能后&#x…

afrog-漏洞扫描(挖洞)工具【了解安装使用详细】

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、afrog介绍 afrog 是一款性能卓越、快速稳定、PoC可定…

MySQL篇-SQL优化实战-减少子查询

回顾 上一篇了解了分析SQL使用的explain&#xff0c;可以点击查看MySQL篇-SQL优化实战了解我在写sql的注意事项还有explain的说明&#xff0c;这次拿一段生产使用的sql进行优化说明。从14s优化到2.6s 待优化的SQL SELECT DISTINCTswpe.tag_number,hca.ACCOUNT_NAME customer…