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

smile1213 - 2021-09-30 18:34:27

一、这是模拟器上的效果

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在z-index层级上

A是相对定位，B、C无定位，所以A>BD设置z-index 9999 但不生效四、理清楚之后，有一个大胆的猜想：

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

五、调整组件父子关系

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

在这里插入图片描述

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

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

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。