当前位置： 首页 > news >正文

wdlinux 默认网站/深圳推广公司介绍

news 文章来源：https://blog.csdn.net/xiaolinlife/article/details/135534484 2025/3/6 21:13:16
wdlinux 默认网站,深圳推广公司介绍,做网站一个月30ip,传奇手游官网下载最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。 项目的架构组成是vue2.x vux vuex vue-router等 用的UI组件库是vux 在页面中有一个功能点，就是点选择公司列表的时候，会…

最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。
项目的架构组成是vue2.x + vux + vuex + vue-router等
用的UI组件库是vux
在页面中有一个功能点，就是点选择公司列表的时候，会出现这个页面上面浮现一个a弹框页面，这个a弹框页面里面有搜索框，可以输入公司名进行搜索，然后出现公司列表，点击其中的一个公司，就算进行选择了。
主要是基于vux这个UI组件库的特性造成了这个问题；基础代码如下：

<template><div class="select-all"><div class="companyList"><popup></popup></div></div>
</template><script>
import { Popup } from 'vux';
export default {components: {Popup,},
};
</script>

打包之后，在页面上运行之后，会发现在页面中的页面布局如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面</title>
</head>
<body><div class="select-all"><div class="companyList"><div>...</div><!-- 显示的列表页 --><div><div class="vux-popup-content vux-popup-content-show"><div>公司列表</div></div></div></div></div><!-- 蒙层 --><div class="vux-popup-mask vux-popup-mask-show"></div>
</body>
</html>

会发现蒙层在body元素中，而显示的弹窗列表在另外的很深的html中，不在一个层级中。

这个z-index样式是vux组件库默认设置的

.vux-popup-mask{z-index:500;
}

于是我给vux-popup-content这个类名设置的是：

.vux-popup-content{z-index:501;
}

然后在安卓中是有效果的，在ios中无效。

首先在html中，vux-popup-mask和vux-popup-content不在一个层级中，不知道是不是因为这个原因。那我怎么解决的呢？
我参考了这这两种做法：

方法1：transform
div {z-index: 2;transform: translateZ(2px)
}
方法2：teleport
// vue
<teleport to="body"><div></div>
</teleport>// 使用vant允许指定dom的组件<van-popup teleport="body"></van-popup>

我借鉴了第二种方法：
加了v-transfer-dom属性
代码如下：

<template><div class="select-all"><div class="companyList" v-transfer-dom><popup></popup></div></div>
</template><script>
import { Popup, TransferDom } from 'vux';
export default {directives:{TransferDom},components: {Popup,},
};
</script>

通过v-transfer-dom可以把内容元素vux-popup-content移动到紧挨着body元素下面，这样就可以和vux-popup-mask处于一个层级里面；

我们可以看一下打包运行后的代码，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面</title>
</head>
<body><div class="select-all"><div>...</div></div><!-- 弹窗内容区 --><div class="v-transfer-dom companyList"><div>...</div><!-- 显示的列表页 --><div><div class="vux-popup-content vux-popup-content-show"><div>公司列表</div></div></div></div><!-- 蒙层 --><div class="vux-popup-mask vux-popup-mask-show"></div>
</body>
</html>

可以看到元素已经移到了外面，所以这个时候设置的z-index: 501 就生效了。

相关文章：

在ios上z-index不起作用问题的总结

最近在维护一个H5老项目时&#xff0c;遇到一个问题&#xff0c;就是在ios上z-index不起作用&#xff0c;在安卓上样式都是好的。 项目的架构组成是vue2.x vux vuex vue-router等 用的UI组件库是vux 在页面中有一个功能点&#xff0c;就是点选择公司列表的时候&#xff0c;会…...

编程日记 2024/1/12 11:57:52

力扣labuladong一刷day59天动态规划

力扣labuladong一刷day59天动态规划 文章目录 力扣labuladong一刷day59天动态规划一、509. 斐波那契数二、322. 零钱兑换 一、509. 斐波那契数 题目链接&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ 思路&#xff1a;这是非常典型的一道题&#x…...

编程日记 2024/1/12 11:54:49

pyenv环境找不到sqlite:No module named _sqlite3

前言 一般遇到这个问题都在python版本管理或者虚拟环境切换中遇到&#xff0c;主要有两个办法解决&#xff0c;如下&#xff1a; 解决方法1 如果使用的pyenv管理python环境时遇到没有_sqlite3 库&#xff0c;可以将当前pyenv的python环境卸载 pyenv uninstall xxx然后在系统…...

编程日记 2024/1/12 11:50:46

Histone H3K4me2 Antibody, SNAP-Certified™ for CUTRUN

EpiCypher是一家为表观遗传学和染色质生物学研究提供高质量试剂和工具的专业制造商。EpiCypher推出的CUT&RUN级别的Histone H3K4me2 Antibody符合EpiCypher的批次特异性SNAP-CertifiedTM标准&#xff0c;在CUT&RUN中具有特异性和高效的靶点富集。通过SNAP-CUTANA™K-Me…...

编程日记 2024/1/12 11:48:44

我用 Laf 开发了一个非常好用的密码管理工具

【KeePass 密码管理】是一款简单、安全简洁的账号密码管理工具&#xff0c;服务端使用 Laf 云开发&#xff0c;支持指纹验证、FaceID&#xff0c;N 重安全保障&#xff0c;可以随时随地记录我的账号和密码。 写这个小程序之前&#xff0c;在国内市场找了很多密码存储类的 App …...

编程日记 2024/1/12 11:45:42

windows项目部署

文章目录 一、项目部署1.1 先准备好文件1.2安装jdk1.3 配置环境1.4 安装tomcat1.5 MySQL安装本机测试的话:远程连接测试 1.6 项目部署 一、项目部署 1.1 先准备好文件 1.2安装jdk 下一步 下一步 下一步 1.3 配置环境 变量名&#xff1a;JAVA_HOME 变量值&#xff1a;jdk的…...

编程日记 2024/1/12 11:44:41

http首部

1. htttp 报文首部 报文结构为&#xff1a;首部 空行&#xff08;CRLF&#xff09;主体 在请求中 http报文首部由请求方法&#xff0c;URI&#xff0c;http版本&#xff0c;首部字段等构成 在响应中&#xff1a;状态码&#xff0c;http版本&#xff0c;首部字段3部分构成 2…...

编程日记 2024/1/12 11:42:39

2024.1.8 Day04_SparkCore_homeWork

目录 1. 简述Spark持久化中缓存和checkpoint检查点的区别 2 . 如何使用缓存和检查点? 3 . 代码题 浏览器Nginx案例 先进行数据清洗,做后续需求用 1、需求一&#xff1a;点击最多的前10个网站域名 2、需求二&#xff1a;用户最喜欢点击的页面排序TOP10 3、需求三&#x…...

编程日记 2024/1/12 11:39:37

09.简单工厂模式与工厂方法模式

道生一&#xff0c;一生二&#xff0c;二生三&#xff0c;三生万物。——《道德经》 最近小米新车亮相的消息可以说引起了不小的轰动&#xff0c;我们在感慨SU7充满土豪气息的保时捷设计的同时&#xff0c;也深深的被本土品牌的野心和干劲所鼓舞。 今天我们就接着这个背景&…...

编程日记 2024/1/12 11:38:35

DHCP，怎么在Linux和Windows中获得ip

一、DHCP 1.1 什么是dhcp DHCP动态主机配置协议&#xff0c;通常被应用在大型的局域网络环境中&#xff0c;主要作用是集中地管理、分配IP地址&#xff0c;使网络环境中的主机动态的获得IP地址、DNS服务器地址等信息&#xff0c;并能够提升地址的使用率。 DHCP作为用应用层协…...

编程日记 2024/1/12 11:34:32

读写锁（arm）

参考文章读写锁 - ARM汇编同步机制实例&#xff08;四&#xff09;_汇编 prefetchw-CSDN博客 读写锁允许多个执行流并发访问临界区。但是写访问是独占的。适用于读多写少的场景 另外好像有些还区分了读优先和写优先 读写锁定义 typedef struct {arch_rwlock_t raw_lock; #if…...

编程日记 2024/1/12 11:27:24

【第33例】IPD体系进阶：市场细分

目录 内容简介 市场细分原因 市场细分主要活动 市场细分流程 作者简介 内容简介 这节内容主要来谈谈 IPD 市场管理篇的市场细分步骤。 其中，市场管理（Market Management）是一套系统的方法。 用于对广泛的机会进行选择性收缩，...

编程日记 2024/1/12 11:24:22

response 拦截器返回的二进制文档（同步下载excel）如何配置

response 拦截器返回的二进制文档&#xff08;同步下载excel&#xff09;如何配置 一、返回效果图二、response如何配置 一、返回效果图 二、response如何配置 service.interceptors.response.use(response > {// 导出excel接口if (response.config.isExport) {return resp…...

编程日记 2024/1/12 11:17:15

为什么要使用云原生数据库？云原生数据库具体有哪些功能？

相比于托管型关系型数据库&#xff0c;云原生数据库极大地提高了MySQL数据库的上限能力&#xff0c;是云数据库划代的产品&#xff1b;云原生数据库最早的产品是AWS的 Aurora。AWS Aurora提出来的 The log is the database的理念&#xff0c;实现存储计算分离&#xff0c;把大量…...

编程日记 2024/1/12 11:13:12

05- OpenCV：图像操作和图像混合

目录 一、图像操作 1、读写图像 2、读写像素 3、修改像素值 4、Vec3b与Vec3F 5、相关的代码演示 二、图像混合 1、理论-线性混合操作 2、相关API(addWeighted) 3、代码演示&#xff08;完整的例子&#xff09; 一、图像操作 1、读写图像 &#xff08;1&#xff09;…...

编程日记 2024/1/12 11:12:11

人脸识别（Java实现的）

虹软人脸识别&#xff1a; 虹软人脸识别的地址&#xff1a;虹软视觉开放平台—以免费人脸识别技术为核心的人脸识别算法开放平台 依赖包&#xff1a; 依赖包是从虹软开发平台下载的 在项目中引入这个依赖包 pom.xml <!-- 人脸识别 --><dependency><gr…...

编程日记 2024/1/12 11:08:08

Maven 依赖管理项目构建工具 教程

Maven依赖管理项目构建工具 此文档为 尚硅谷 B站maven视频学习文档&#xff0c;由官方文档搬运而来&#xff0c;仅用来当作学习笔记用途&#xff0c;侵删。 另&#xff1a;原maven教程短而精&#xff0c;值得推荐&#xff0c;下附教程链接。 atguigu 23年Maven教程 目录 文章目…...

编程日记 2024/1/12 11:06:05

供应链+低代码,实现数字化【共赢链】转型新策略

在深入探讨之前&#xff0c;让我们首先明确供应链的基本定义。供应链可以被理解为一个由采购、生产、物流配送等环节组成的网状系统&#xff0c;它始于原材料的采购&#xff0c;经过生产加工&#xff0c;最终通过分销和零售环节到达消费者手中。 而数字化供应链&#xff0c;则是…...

编程日记 2024/1/12 11:03:02

[力扣 Hot100]Day3 最长连续序列

题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 出处 思路 此题可用带排序的哈希表&#xff0c;先构建哈希表&#xff0…...

编程日记 2024/1/12 11:02:01

【办公技巧】Word功能区灰色显示不能编辑,怎么破?

Word文档可以设置加密来保护文件禁止修改&#xff0c;但是在word文档中设置限制编辑功能时对它的作用是否有详细的了解呢&#xff1f;今天为大家介绍word限制编辑功能的作用以及忘记了限制编辑密码该如何解决。 设置限制大家应该都清楚&#xff0c;就是点击工具栏中的审阅 – …...

编程日记 2024/1/12 10:59:59

全志V853开发板原理图

本章节将对开发板几个主要的部件的原理图进行说明&#xff0c;方便快速上手开发板的硬件资料。 开发板硬件框图如下&#xff1a; 模块介绍 GPIO 分配 此表格为 V853 部分重要的 GPIO 的分配表&#xff0c;> 表示对IO的另外一个复用&#xff0c;完整的 GPIO 分配请参阅原理…...

编程日记 2024/1/12 10:57:58

【解决】Unity Project 面板资源显示丢失的异常问题处理

开发平台&#xff1a;Unity 2021.3.7f1c1   一、问题描述 在开发过程中&#xff0c;遭遇 Project 面板资源显示丢失、不全的问题。但 Unity Console 并未发出错误提示。   二、解决方案&#xff1a;删除 Library 目录 前往 “工程目录/Library” 删除内部所有文件并重打开该…...

编程日记 2024/1/12 10:52:53

Hyperledger Fabric Docker 方式多机部署生产网络

规划网络拓扑 3 个 orderer 节点&#xff1b;组织 org1 , org1 下有两个 peer 节点&#xff0c; peer0 和 peer1; 组织 org2 , org2 下有两个 peer 节点&#xff0c; peer0 和 peer1; 因为我只有 3 台虚拟机资源所以没法实现完全的多机部署&#xff0c;资源使用规划如下&#…...

编程日记 2024/1/12 10:51:51

高效降压控制器FP7132XR：为高亮度LED提供稳定可靠的电源

目录 一. FP7132概述 二. 驱动电路&#xff1a;FP7132 三. FP7132应用 高亮度LED作为新一代照明技术的代表&#xff0c;已经广泛应用于各种领域。然而&#xff0c;高亮度LED的工作电压较低&#xff0c;需要一个高效降压控制器来为其提供稳定可靠的电源。在众多降压控制器…...

编程日记 2024/1/12 10:49:49

Spring Boot - Application Events 的发布顺序_ApplicationEnvironmentPreparedEvent

文章目录 Pre概述Code源码分析 Pre Spring Boot - Application Events 的发布顺序_ApplicationEnvironmentPreparedEvent 概述 Spring Boot 的广播机制是基于观察者模式实现的&#xff0c;它允许在 Spring 应用程序中发布和监听事件。这种机制的主要目的是为了实现解耦&#…...

编程日记 2024/1/12 10:48:48

华为HCIE课堂笔记第十三章 IPv6地址配置

目录 第十三章 IPv6地址配置 13.1 IPv6地址无状态自动配置 13.1.1 RS和RA报文格式 13.1.2 RA的Flags字段 13.1.3 地址的生存周期 13.1.4 RA报文中前缀中的Flags 13.2 DHCPv6 13.2.1 DHCPV6的概念 13.2.2 DCHPv6的报文 第十三章 IPv6地址配置 13.1 IPv6地址无状态自动…...

编程日记 2024/1/12 10:46:46

计算机网络-VLAN间通信

之前复习了VLAN的概念以及几个接口类型。VLAN在二层可以实现广播域的划分&#xff0c;VLAN间可以实现二层通信&#xff0c;但是不能实现三层通信&#xff0c;需要借助其它方式。 一、概述 实际网络部署中一般会将不同IP地址段划分到不同的VLAN。同VLAN且同网段的PC之间可直接进…...

编程日记 2024/1/12 10:43:42

vue3的福音框架arco.design

前言&#xff1a; 在vue2于2023年底正式宣布不在维护&#xff0c;vue3使用越来越频繁的时刻&#xff0c;我们实现项目的辅助框架也越来越多。element, iview, antd 等经典框架继续风靡一时&#xff0c;不过也有很多好的框架&#xff0c;功能也强大&#xff0c;比如我们今天说的…...

编程日记 2024/1/12 10:41:40

BSP视频教程第29期：J1939协议栈CAN总线专题，源码框架，执行流程和应用实战解析，面向车通讯，充电桩，模组通信等(2024-01-08)

视频教程汇总帖&#xff1a;【学以致用&#xff0c;授人以渔】2024视频教程汇总&#xff0c;DSP第12期&#xff0c;ThreadX第9期&#xff0c;BSP驱动第29期&#xff0c;USB实战第5期&#xff0c;GUI实战第3期&#xff08;2024-01-08&#xff09; - STM32F429 - 硬汉嵌入式论坛 …...

编程日记 2024/1/12 10:38:36

Java lambda表达式如何自定义一个toList Collector

匿名类&#xff1a; package l8;import java.util.*; import java.util.function.BiConsumer; import java.util.function.BinaryOperator; import java.util.function.Function; import java.util.function.Supplier; import java.util.stream.Collector; import java.util.s…...

编程日记 2024/1/12 10:33:29