uni-app_scroll-view_ios端_组件内部z-index失效处理

uni-app scroll-view ios端 组件内部z-index失效处理

主要原因

<scroll-view> 内部设置了 -webkit-overflow-scrolling: touch 样式，导致z-index失效（safari 3D变换会忽略z-index的层级问题）造成内部组件的弹出框显示遭到遮挡

<template>
  <uni-scroll-view v-on="$listeners">
    <div
      ref="wrap"
      class="uni-scroll-view"
    >
      <div
        ref="main"
        :style="{'overflow-x': scrollX?'auto':'hidden','overflow-y': scrollY?'auto':'hidden'}"
        class="uni-scroll-view"
      >
          ...

<style>
    .uni-scroll-view {
      position: relative;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      /* display: flex; 时在安卓下会导致scrollWidth和offsetWidth一样 */
      height: 100%;
      max-height: inherit;
    }
    ...
</style>

处理方法

在使用弹出框时，采用深度选择器动态改变scroll-view的内部样式，更换成 auto 滚动会有一点卡，不过对弹出框影响不大

<scroll-view :class="showPopup ? 'MyStyle' : ''">
<style scoped>
    .MyStyle >>> .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
</style>
// scss 
<style lang="scss" scoped>
.MyStyle {
    ::v-deep .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
}
</style>
// less
<style lang="less" scoped>
.MyStyle {
    /deep/ .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
}
.MyStyle {
    ::v-deep .uni-scroll-view {
        -webkit-overflow-scrolling: auto;
    }
}
</style>