微信picker弹出之后 , 背景变成灰色是怎么做的

微信小程序在弹出picker组件时,会将页面背景变为半透明的灰色,这是通过设置一个全屏的蒙层来实现的。

具体实现方法如下:

在WXML文件中,添加一个view元素作为蒙层,并设置其样式和属性:

<view class="mask" wx:if="{{showPicker}}" bindtap="hidePicker"></view>
<picker wx:if="{{showPicker}}" mode="date" value="{{date}}" start="{{startDate}}" end="{{endDate}}" bindchange="onDateChange"></picker>


其中,mask类用于设置蒙层的样式,wx:if属性用于控制是否显示picker和蒙层,bindtap属性用于绑定点击事件,当用户点击蒙层时,需要隐藏picker组件。

在WXSS文件中,定义mask类的样式:

.mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index: 999;
}


其中,position属性设置为fixed,表示该元素固定在页面上,不随滚动条滚动;top、left、right、bottom属性设置为0,表示该元素覆盖整个页面;background-color设置为半透明的黑色,表示蒙层的颜色;z-index属性设置为999,表示该元素的层级高于其他元素,确保蒙层覆盖在picker组件上方。

这样,当用户打开picker组件时,蒙层就会覆盖整个页面,并将背景变成半透明的灰色。当用户点击蒙层时,就会隐藏picker组件并将蒙层移除。
 

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

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

相关文章

互联网Java工程师面试题·Java 并发编程篇·第三弹

目录 26、什么是线程组&#xff0c;为什么在 Java 中不推荐使用&#xff1f; 27、为什么使用 Executor 框架比使用应用创建和管理线程好&#xff1f; 27.1 为什么要使用 Executor 线程池框架 27.2 使用 Executor 线程池框架的优点 28、java 中有几种方法可以实现一个线程…

【牛客网刷题(数据结构)】:环形链表的约瑟夫问题

描述 编号为 1 到 n 的 n 个人围成一圈。从编号为 1 的人开始报数&#xff0c;报到 m 的人离开。 下一个人继续从 1 开始报数。 n-1 轮结束以后&#xff0c;只剩下一个人&#xff0c;问最后留下的这个人编号是多少&#xff1f; O(n) 示例1 好环形链表的约瑟夫问题是一个经典的问…

分布式链路追踪如何跨线程

背景 我们希望实现全链路信息&#xff0c;但是代码中一般都会异步的线程处理。 解决思路 我们可以对以前的 Runable 和 Callable 进行增强。 可以使用 ali 已经存在的实现方式。 TransmittableThreadLocal (TTL) 解决异步执行时上下文传递的问题 核心的实现思路如下&#…

Vue_Bug NPM下载速度过慢

Bug描述&#xff1a; NPM下载速度过慢 解决方法&#xff1a; 将NPM的默认下载源换成国内镜像源 查看当前下载源的命令&#xff1a; npm config get registry换成淘宝镜像源的命令&#xff1a; npm config set registry https://registry.npmmirror.com/

微信小程序(小程序入门)

一&#xff0c;介绍 1、什么是小程序 小程序是一种轻量级的应用程序&#xff0c;可以在移动设备上运行&#xff0c;不需要用户下载和安装。它们通常由企业或开发者开发&#xff0c;用于提供特定功能或服务。 微信小程序&#xff08;wei xin xiao cheng xu&#xff09;&#xf…

O3DE社区发布2310.0版本

O3DE社区在今年10月10日发布了版本2310.0。 2310.0版本对应的代码标签&#xff0c;见链接。 直接下载标签2310.0对应的源码&#xff0c;命令如下&#xff1a; git clone https://github.com/o3de/o3de.git -b 2310.0或者本地已经clone过项目&#xff0c;可以通过切换分支的方…

easyUI重新渲染

问题 使用Easyui 时&#xff0c;动态后添加的元素样式无法生效。 解决颁发 全页面重新渲染 $.parser.parse();单一元素重新渲染 var obj $("#div1").append("<input classeasyui-textbox typetext>"); $.parser.parse(obj);

NPM相关命令

临时使用 npm --registry https://registry.npm.taobao.org install 包名2.永久设置为淘宝镜像 npm config set registry https://registry.npm.taobao.org3.换回国外官方源 npm config set registry https://registry.npmjs.org4.查看使用的源地址 npm config get registr…

内部类概述

一、内部类 1.内部类概述 2.内部类的四种实现形式 1.成员内部类 public class Outer {private int age99;public static String a;//成员内部类public class Inner{private int age88;private String name; // public static String school; //jdk 16开始才支持定义静态…

关于safari浏览器浏览html video标签无法正常播放的问题

问题&#xff1a; 前端demo使用一个video标签包含一个非静态资源的mp4文件。在chrome浏览器下可以正常展示&#xff0c;但是safari却不可以。 原因&#xff1a; 1. mp4文件必须用ffmpeg合成的&#xff0c;其他压缩的mp4文件是不可能展示的。请确定mp4文件并用正常的ffmpeg进…

nvm、node、npm解决问题过程记录

在Windows10如何降级Node.js版本&#xff1a;可以尝试将Node.js版本降级到一个较旧的版本&#xff0c;以查看问题是否得以解决。可以使用Node Version Manager (nvm) 来轻松切换Node.js版本&#xff0c;具体完整步骤&#xff1a; 首先&#xff0c;需要安装Node Version Manager…

C++项目:【负载均衡式在线OJ】

文章目录 一、项目介绍 二、技术栈与开发环境 1.所用技术: 2.开发环境&#xff1a; 三、项目演示 1.运行代码 2.进入项目首页 3.题目列表 4.点击具体一道题 5.编辑代码并提交 四、项目思维导图 五、项目宏观结构 六、Comm公共模块 1.日志工具log.hpp 2.其他工具…

SpringEL:SpEL表达式文本转译

目录 1.效果展示 2.实现方法 在项目开发中&#xff0c;后端研发定义的规则表达式&#xff0c;由于掺杂字段定义、操作符、具体数值等&#xff0c;对业务运营人员比较晦涩难懂&#xff0c;不易理解&#xff0c;解释成本也比较高&#xff0c;为了更好将规则表达式的含义触达业务…

多线程并发篇---第十篇

系列文章目录 文章目录 系列文章目录一、Java线程池中队列常用类型有哪些?二、线程安全需要保证几个基本特征?三、说一下线程之间是如何通信的?一、Java线程池中队列常用类型有哪些? ArrayBlockingQueue 是一个基于数组结构的有界阻塞队列,此队列按 FIFO(先进先出)原则…

如何在 Spring Boot 中进行分布式追踪

在 Spring Boot 中进行分布式追踪 分布式系统中的应用程序由多个微服务组成&#xff0c;它们可以位于不同的服务器、容器或云中。当出现问题时&#xff0c;如性能瓶颈、错误或延迟&#xff0c;了解问题的根本原因变得至关重要。分布式追踪是一种用于跟踪和分析分布式应用程序性…

linux安装filebeat并收集日志到elasticsearch

摘要&#xff1a; 通过filebeat收集服务器上各个应用的日志到elasticsearch&#xff0c;通过tags区分不同的应用创建不同的索引保存日志。 官网地址&#xff1a; https://www.elastic.co/cn/downloads/past-releases#filebeat 安装步骤&#xff1a; 1&#xff1a;下载并解…

linux8使用yum安装reids流程

准备安装环境 yum install -y gcc tcl gcc-c make 使用yum进行处理问题 yum install redis -y 安装完成之后会有/etc/redis.conf&#xff0c;我们需要进行一个备份操作 cp /etc/redis.conf /home/redis/ 启动redis服务测试 能否登录 systemctl start redis systemctl st…

如何利用IP地址定位保护网络安全?

通过IP地址定位可以在一定程度上增强网络安全&#xff0c;但它并不是唯一的安全措施。以下是如何利用IP地址定位来保护网络安全的一些方法&#xff1a; 异常检测和入侵检测&#xff1a;监控网络上的IP地址流量&#xff0c;定位异常活动&#xff0c;如大规模的连接尝试、不寻常的…

免费 AI 编程助手 Amazon CodeWhisperer 体验

文章作者&#xff1a;文章作者&#xff1a;米菲爸爸 2022 年 6 月 23 亚马逊云科技就已经推出了 Amazon CodeWhisperer&#xff08;预览版&#xff09;。经过不到一年的测试和 AIGC的飓风在 2023 年 4 月 18 日实时 AI 编程助手 Amazon CodeWhisperer正式可用 Amazon CodeWhis…

微信浏览器大字体模式 按钮文字居中用line-height 显示异常

按钮文字居中用line-height 的css 在微信浏览器大字体模式&#xff0c;会导致显示错误。改成flex 居中就好了