乐趣区

关于微信小程序:微信小程序使用vantabs组件ios真机zindex层级错乱问题已解决ios自定义组件层级不穿透

一、这是模拟器上的成果

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

欢送留言,咱们一起摸索更多~

退出移动版