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

一、这是模拟器上的效果

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

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

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

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

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

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

  • 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上恢复正常

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

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

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

你可能感兴趣的:(微信小程序小程序css)