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

news/2024/7/20 2:47:58 标签: 微信小程序, 小程序, 前端

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

具体实现方法如下:

  1. 在WXML文件中,添加一个view元素作为蒙层,并设置其样式和属性:
  2. <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组件。

  3. 在WXSS文件中,定义mask类的样式:
  4. .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
    

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

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


http://www.niftyadmin.cn/n/211250.html

相关文章

Python基础之for循环

一&#xff1a;for循环语句 for 变量名 in 可迭代对象: 代码一代码二... 可迭代对象可以是字符串、元组、列表、字典等。 for循环可以为可迭代对象中的每一个元素执行一个语句块。 例&#xff1a; for i in [1,2,3]:print(i) # 运行结果 1 2 3 二、for循环的使用 1&…

QT背后故事之Qt创始人Eirik Chambe-Eng

Eirik Chambe-Eng是一名挪威程序员。1990 年&#xff0c;他与 Haavard Nord 一起在特隆赫姆的一家超声设备软件开发部门工作。他们不满足于跨平台软件开发工具&#xff0c;创建了 Qt。1994 年&#xff0c;他们创立了 Trolltech 公司。 2004年aKademy采访了Eirik Chambe-Eng&…

CVE漏洞复现-CVE-2022-22965-Spring-RCE漏洞

CVE-2022-22965-Spring-RCE漏洞 漏洞概况与影响 Spring framework 是Spring 里面的一个基础开源框架&#xff0c;其目的是用于简化 Java 企业级应用的开发难度和开发周期,2022年3月31日&#xff0c;VMware Tanzu发布漏洞报告&#xff0c;Spring Framework存在远程代码执行漏洞…

1mm³大小,世界首个功率破KW的单芯片激光模组诞生

近年来随着技术不断发展&#xff0c;激光雷达的体积、成本也在不断降低&#xff0c;成为了一种受到各行业关注的关键技术。它的用途越发广泛&#xff0c;可用于自动驾驶汽车、大气观测使用的LiDAR传感器&#xff0c;还可以用于医疗保健&#xff08;治疗和检查分析&#xff09;、…

PCL 非线性最小二乘法拟合圆柱

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里通过非线性最小二乘的方法来实现圆柱体的拟合,具体的计算过程如下所述: 图中, p p p为输入数据的点位置,求解的参数为柱体的轴向向量 a

【华为OD机试真题】日志采集系统(javapython)

日志采集系统 时间限制:1s空间限制:256MB限定语言:不限 题目描述: 日志采集是运维系统的的核心组件。日志是按行生成,每行记做一条,由采集系统分 批上报。 如果上报太频繁,会对服务端造成压力;如果上报太晚,会降低用户的体验;如果一 次上报的条数太多,会导致超时…

Vector - CAPL - CAN x 总线信息获取

在CAN&CANFD测试中&#xff0c;我们经常需要获取到CAN总线的负载、错误帧、过载帧、发送错误等等CAN总线上面的信息&#xff0c;这些信息如此重要&#xff0c;但是如果真的要写代码去实现也是相当不易的&#xff0c;那我们该如何去获取到的呢&#xff1f;下面我们就来一起看…

如何学习计算机视觉?

AI的专业领域知识是指AI与具体应用领域相结合时所需要的该应用领域的知识。AI的应用领域非常广泛&#xff0c;例如计算机视觉、智能交通、智能制造、智慧金融、智慧教育、智慧农业、智慧能源、智能通信、智能芯片等。本文主要介绍计算机视觉的基本概念、发展历程、主要研究内容…