一、这是模拟器上的效果

在这里插入图片描述

在这里插入图片描述

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

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐