合理运用zIndex，解决uniapp原生控件层级过高无法覆盖的问题

2023-12-19 11:17:49

本文分享一个在uniapp中解决原生控件层级过高导致无法覆盖其他元素的解决方案，即合理运用zIndex属性。

前言

在uniapp开发中，页面渲染分为两部分：原生控件和webview。原生控件包括导航栏、tabbar、video、map等，由平台原生渲染；webview则负责渲染vue页面。为了提升性能，uniapp将原生控件放置在webview之上，导致原生控件的层级高于webview。当原生控件与webview上的元素重叠时，原生控件将覆盖webview上的元素，导致webview上的元素无法被看到。

解决方案

为了解决原生控件层级过高导致无法覆盖其他元素的问题，我们可以合理运用zIndex属性。zIndex属性可以设置元素的层级，值越大，层级越高。通过设置原生控件的zIndex值小于webview上的元素，我们可以让webview上的元素覆盖原生控件。

具体步骤

在uniapp中，可以使用style标签来设置元素的zIndex值。例如，以下代码将设置原生控件的zIndex值为10：

<style>
.native-control {
  z-index: 10;
}
</style>

接下来，我们需要在vue页面中使用原生控件。例如，以下代码在vue页面中使用了一个原生控件video：

<template>
  <video class="native-control"></video>
</template>

通过设置原生控件的zIndex值小于webview上的元素，我们可以让webview上的元素覆盖原生控件。例如，以下代码将设置webview上元素的zIndex值为20：

<style>
.webview-element {
  z-index: 20;
}
</style>

示例代码

以下是一个完整的示例代码，演示如何通过合理使用zIndex属性来解决原生控件层级过高导致无法覆盖其他元素的问题：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <style>
      .native-control {
        z-index: 10;
      }
      .webview-element {
        z-index: 20;
      }
    </style>
  </head>
  <body>
    <video class="native-control"></video>
    <div class="webview-element">webview上的元素</div>
  </body>
</html>