小程序IOS穿透问题

319 阅读1分钟

问题现象(只在IOS上面发生)

一共有三层popup(有赞的popup组件)

第一层与第二层是兄弟关系,第二层与第三层是父子关系(第三层popup是通过第二层的一个弹窗组件弹出)

  • 第三层popup里面的绝对定位的按钮与第二层popup里面的绝对定位的按钮发生穿透现象
  • 第一层popup组件里面的绝对定位按钮不会被穿透

问题分析:

  • 小程序绘制第一层popup,然后绘制第二层popup,所以第二层优先级高于第一层
  • 第二次里面先绘制了一个弹出框组件,会弹出第三层popup,然后又绘制了置底的确认按钮
  • 第三层popup在点击弹出框组件弹出后,里面也有一个置底的确认按钮。我猜,第二层popup里面的弹出框组件没有第二层的置底确认按钮优先级高,因为他们是兄弟关系,后绘制上去的优先级高于先绘制上去的层级。

(很绕吧,以后考虑补充一个图)

当然安卓里面是没有问题的,可能是IOS在层级这块没有安卓处理的好,所以经过了几番尝试,找到了解决办法。

解决办法(必须两者同时修改):

  • 将popup里面的置底确认按钮去掉了绝对定位,改为flex布局置底
  • button组件用了view去实现的自定义按钮组件