uni-app tabbar安卓高度塌陷及非原生导航栏滑动时闪烁问题

在 uni-app 开发中，使用 tabbar 时可能会遇到以下两个问题：

1. 安卓高度塌陷：在安卓设备上，tabbar 可能会出现高度塌陷，导致底部内容被遮挡或布局错乱。
2. 非原生导航栏滑动时闪烁：在使用非原生导航栏时，页面滑动时可能会出现闪烁现象。

解决方案

1. 安卓高度塌陷问题

原因：安卓设备的 tabbar 高度可能与 iOS 设备不同，导致布局错乱。

解决方案：

• 使用 safe-area-inset-bottom：可以通过 safe-area-inset-bottom 来适配安卓设备的高度问题。

  .tabbar {
    padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
    padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
  }
  

• 动态计算高度：在 onLoad 或 onReady 生命周期中动态计算 tabbar 的高度，并设置到页面或组件的样式上。

  onReady() {
    const systemInfo = uni.getSystemInfoSync();
    const tabbarHeight = systemInfo.platform === 'android' ? 50 : 49; // 根据实际情况调整
    this.tabbarHeight = tabbarHeight;
  }
  

  然后在模板中使用：

  <view :style="{ height: tabbarHeight + 'px' }"></view>
  

2. 非原生导航栏滑动时闪烁问题

原因：非原生导航栏在页面滑动时可能会因为频繁的渲染或布局计算导致闪烁。

解决方案：

• 使用原生导航栏：如果可能，尽量使用原生导航栏，避免非原生导航栏带来的性能问题。

• 优化渲染：确保页面滑动时不会频繁触发 setData 或 vue 的响应式更新。可以通过 v-if 或 v-show 来控制组件的显示与隐藏，减少不必要的渲染。

• 使用 scroll-view：在需要滑动的区域使用 scroll-view 组件，并设置 scroll-y 属性，避免整个页面滑动导致的性能问题。

  <scroll-view scroll-y style="height: 100vh;">
    <!-- 页面内容 -->
  </scroll-view>
  

• CSS 优化：确保在滑动时不会触发重绘或回流。可以通过 will-change 属性来优化。

  .content {
    will-change: transform;
  }