程序员经验分享-hwhale

微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】

2023-11-08

一、这是模拟器上的效果

在这里插入图片描述

在这里插入图片描述

二、这是苹果11真机上的效果（安卓真机正常）

在这里插入图片描述

三、先来理一下代码的层级现状

在这里插入图片描述

  • A 为van-tabs
  • B 是自定义组件，为数据列表，C为单个数据
  • D 也是自定义组件（图中省略）为单个数据详情弹窗，且D是B的子组件！

在z-index层级上

  • A是相对定位，B、C无定位，所以A>B
  • D设置z-index 9999 但不生效

四、理清楚之后，有一个大胆的猜想：

B、D均为自定义组件，且D是B的子组件，会不会导致D的层级最高只能和B一样高？导致不能穿透B，所以被A组件盖住？

五、调整组件父子关系

为了验证是否有这个问题，我将组件D从组件B中剥离，放在与A、B同级的wxml引入，果然，苹果11上恢复正常

在这里插入图片描述

为了更好的理解这个问题，所以我将其定义成：ios自定义组件层级不穿透。正确的做法，把需要有更高层级的组件，放在更外层

欢迎留言，我们一起探索更多~

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序

ios

小程序

微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】 的相关文章

随机推荐

  • 智慧PG集成开发平台pgting-cli发布了

    介绍 两周前我们发布了智能页面搭建平台 智慧PG pgting 深受用户青睐 很多用户尝试了在线开发组件 为了方便用户定制开发组件和组件共享 智慧PG设计之初就考虑了组件定制开发问题 为此 我们设计和研发了智慧PG集成工作台pgting c

  • 软件测试金融项目，在测试的时候一定要避开的一些雷区

    软件测试金融项目需要格外谨慎和专注 因为这些项目通常涉及大量的交易 用户隐私和其他敏感信息 以下是一些软件测试金融项目时需要关注的方面 1 数据保护 在测试金融项目时 必须确保用户数据和投资信息得到保护 测试人员必须确保测试环境和测试数据安

  • 【C++】[boost]::enable_shared_from_this类实例

    原来误以为可以用作单例 生命周期与应用本身同寿那种 后来参考例子后发现是智能指针管理下的实例 1 需要继承自enable shared from this 比如说 class Y public Boost enable shared fro

  • 安装使用MMDeploy（Python版）

    安装使用MMDeploy Python版 一 安装 MMDeploy python mmdeploy main tools deploy py mmdeploy main configs mmdet detection detection

  • 蓝牙的知识总结（1）

    1 SoC System on Chip 称为系统级芯片 一个产品 是一个有专用目标的集成电路 其中包含完整系统并有嵌入软件的全部内容 同时它又是一种技术 用以实现从确定系统功能开始 到软 硬件划分 并完成设计的整个过程 从狭义角度讲 它是

  • 【算法】字符串算法题——回文(学习篇)

    验证回文串 给定一个字符串 验证它是否是回文串 只考虑字母和数字字符 可以忽略字母的大小写 说明 本题中 我们将空字符串定义为有效的回文串 示例 1 输入 A man a plan a canal Panama 输出 true 解释 ama

  • BlocklyGame （编译方法）分析

    先列出以下几个位置 本人用的是linux BlocklyGame源码位置 https github com google blockly games 获取源码 git clone https github com google blockl

  • Web 基础 之 Eclipse 中如何把新建的 jsp 文件默认的编码格式(ISO-8859-1)修改为 UTF-8，避免中文乱码

    Web 基础 之 Eclipse 中如何把新建的 jsp 文件默认的编码格式 ISO 8859 1 修改为 UTF 8 避免中文乱码 目录 Web 基础 之 Eclipse 中如何把新建的 jsp 文件默认的编码格式 ISO 8859 1

  • 网络安全中机器学习大合集

    目录 数据集 论文 书籍 演讲 教程 课程 杂项 数据集 安全相关数据样本集 DARPA 入侵检测数据集 Stratosphere IPS 数据集 开放数据集 NSA 的数据捕获 ADFA 入侵检测数据集 NSL KDD 数据集 恶意 UR

  • arm ldr/ld/数据加载系列指令和adr指令

    ldrb指令 1 语法 armv7手册语法 LDRB

  • Android中收听特定应用安装成功的广播

    一 manifest的配置

  • C语言当中的分段函数求解

    对于学习C语言的小白来说 经常会遇到求解分段函数的问题 下面是小编写的一段求解分段函数的代码 希望对于初学的你们有所帮助 代码求解的分段函数为 y f x 4x 3 x lt 15 y f x 2 5x 10 5 x gt 15 inclu

  • 网络编程--TCP/IP协议(一)

    目录 前言 一丶网络基础 lt 1 gt 认识IP地址 1 gt 具体格式 2 gt 组成 3 gt 分类 4 gt 子网掩码 lt 2 gt 认识MAC地址 二丶网络设备及相关技术 lt 1 gt 物理层 集线器 lt 2 gt 数据链路

  • C++：实现计算贷款支付额问题

    计算月支付额的公式如下 月支付额 贷款总额 月利率 1 1 1 月利率 年数 12 include

  • win10使用腾讯会议软件没声音怎么解决

    购买了一个USB接口的带微麦网络摄像头 在win10电脑上打开腾讯会议软件进入会议后讲话始终没有声音输出 经尝试 排除麦克风和声卡音箱硬件和驱动的原因之后 Win10操作系统上腾讯会议麦克风能接收到输入但没有声音播出 一般会是麦克风设置和w

  • 什么是数据产品，如何设计一款好用的数据产品

    何为数据产品 从广义上讲 一切以数据作为驱动或者核心的都叫数据产品 例如数据报表平台 DMP 搜索与精准化产品 风控产品等等 从狭义上讲 就是公司的内部数据平台 今天和大家讨论的 主要是关于公司的内部数据平台的搭建 公司的内部数据平台 主要

  • 【满分】【华为OD机试真题2023B卷 JAVA&JS】计算最大乘积

    华为OD2023 B卷 机试题库全覆盖 刷题指南点这里 计算最大乘积 知识点字符串位运算 时间限制 1s 空间限制 32MB 限定语言 不限 题目描述 给定一个元素类型为小写字符串的数组 请计算两个没有相同字符的元素 长度乘积的最大值 如果

  • GAN网络系列博客(一)：用于人脸生成的StyleGAN结构

    目录 简介 基于风格的生成器 生成器的性质 总结 Reference 在未来的一段时间 我会开一个小专题 来介绍下GAN网络的一些经典论文 希望对那些想要入坑的同学提供一点点帮助 考虑到StyleGAN系列论文在相关领域的影响力 我们首先来

  • QT 多线程实现方式

    前因 当调用QApplication exec 时 就启动了QT的事件循环 在开始的时候QT会发出一些事件命令来显示和绘制窗口部件 在这之后 事件循环就开始运行 它不断检查是否有事件发生并且把这些事件发生给应用程序的QObject 当处理一

  • 微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】

    一 这是模拟器上的效果 二 这是苹果11真机上的效果 安卓真机正常 三 先来理一下代码的层级现状 A 为van tabs B 是自定义组件 为数据列表 C为单个数据 D 也是自定义组件 图中省略 为单个数据详情弹窗 且D是B的子组件 在z

热门标签