18910140161

微信小程序使用van-tabs组件 IOs实际z-index级别故障问题[已解决 IOs自定义组件级别未通过]

顺晟科技

2021-09-24 11:18:46

128

一、这是模拟器上的效果

在这里插入图片描述

在这里插入图片描述

二、这是苹果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自定义组件层级不穿透。正确的做法,把需要有更高层级的组件,放在更外层

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

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航