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>