uni-app在荣耀官方抽检中发现APP底部三键导航与底部功能键显示交互重叠问题

针对uni-app在荣耀官方抽检中发现的APP底部三键导航与底部功能键显示交互重叠问题，这通常是由于应用界面布局未能正确适配不同设备和系统导航栏导致的。为了解决这个问题，我们可以采用动态调整页面布局、监听系统导航栏高度变化等方法。以下是一个基于uni-app的解决方案示例，该示例展示了如何根据系统导航栏高度调整页面底部功能键的位置。

首先，确保你的uni-app项目已经启用了App.vue中的onLaunch和onShow生命周期函数，以及pages.json中的页面配置。

1. 获取系统导航栏高度

在App.vue的onLaunch或onShow函数中，我们可以使用uni-app提供的API获取系统信息，包括导航栏高度。

export default {
  onLaunch() {
    // 获取系统信息
    uni.getSystemInfo({
      success: (res) => {
        // 存储导航栏高度到全局变量
        uni.setStorageSync('statusBarHeight', res.statusBarHeight);
        uni.setStorageSync('navigationBarHeight', res.navigationBarHeight);
      }
    });
  }
}

1. 动态调整页面布局

在你的页面组件中，根据存储的系统导航栏高度动态调整底部功能键的位置。这里以index.vue为例：

<template>
  <view class="container">
    <!-- 页面内容 -->
    <view class="content">
      <!-- ... -->
    </view>
    <!-- 底部功能键 -->
    <view class="bottom-bar" :style="{ bottom: navigationBarHeight + 'px' }">
      <!-- 功能键 -->
      <button>功能1</button>
      <button>功能2</button>
      <button>功能3</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navigationBarHeight: 0
    };
  },
  onLoad() {
    // 从全局变量中获取导航栏高度
    this.navigationBarHeight = uni.getStorageSync('navigationBarHeight') || 0;
    // 如果需要，也可以加上状态栏高度
    this.navigationBarHeight += uni.getStorageSync('statusBarHeight') || 0;
  }
}
</script>

<style>
.container {
  position: relative;
  height: 100vh;
}
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  /* 其他样式 */
}
</style>

以上代码示例展示了如何根据系统导航栏高度动态调整底部功能键的位置，从而避免与底部三键导航重叠。注意，根据具体的设计需求，你可能需要调整样式和布局逻辑。此外，确保在不同设备和系统版本上测试应用，以确保兼容性。