用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 小技巧系列 查看内容

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

Rolan 2021-9-26 00:10

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: smile1213 来自: segmentfault