uni-app 微信小程序在安卓手机来回切换 Tabbar 页面时，导航栏下方有背景色（非白）会闪白

uni-app 微信小程序在安卓手机来回切换 Tabbar 页面时，导航栏下方有背景色（非白）会闪白

项目信息 描述
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10专业版19042.928
HBuilderX类型 正式
HBuilderX版本号 3.1.22
第三方开发者工具版本号 1.05.2107090
基础库版本号 2.18.1
项目创建方式 HBuilderX

产品分类：uniapp/小程序/微信
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：win10专业版19042.928
HBuilderX类型：正式
HBuilderX版本号：3.1.22
第三方开发者工具版本号：1.05.2107090
基础库版本号：2.18.1
项目创建方式：HBuilderX

示例代码：

    <view class="uni-container">  
    <view class="" style="height: 100rpx; background-color: #007AFF;" />  

    <view v-if="!hasLeftWin" class="uni-header-logo">  
        <image class="uni-header-image" src="/static/componentIndex.png" />  
    </view>  
    <view v-if="!hasLeftWin" class="uni-hello-text">  
        <text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>  
        <u-link class="hello-link" :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"  
         :inWhiteList="true" />  
    </view>  
    <view class="uni-panel" v-for="(item, index) in list" :key="item.id">  
        <view class="uni-panel-h" :class="item.open || activeOpen === item.id ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item.id)">  
            <text class="uni-panel-text">{{item.name}}</text>  
            <text class="uni-panel-icon uni-icon" :class="item.open || activeOpen === item.id ? 'uni-panel-icon-on' : ''">&amp;#xe581;</text>  
        </view>  
        <view class="uni-panel-c" v-if="item.open || activeOpen === item.id">  
            <view :class="{'left-win-active': leftWinActive === (item2.url ? item2.url.split('/')[3] : item2) && hasLeftWin}"  
             class="uni-navigate-item" v-for="(item2,key) in item.pages" :key="key" @click="goDetailPage(item.id, item2)">  
                <text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>  
                <text class="uni-navigate-icon uni-icon">&amp;#xe470;</text>  
            </view>  
        </view>  
    </view>  
</view>  
`

更多关于uni-app 微信小程序在安卓手机来回切换 Tabbar 页面时，导航栏下方有背景色（非白）会闪白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 微信小程序在安卓手机来回切换 Tabbar 页面时，导航栏下方有背景色（非白）会闪白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是微信小程序在安卓设备上切换 Tabbar 页面时常见的渲染问题。主要原因是微信小程序底层在页面切换时会短暂显示默认的白色背景，导致与非白色导航栏背景产生视觉闪烁。

解决方案：

  1. 设置全局背景色
    在 pages.json 中为每个页面配置相同的背景色，与导航栏背景保持一致：

    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarBackgroundColor": "#007AFF",
        "backgroundColor": "#007AFF" // 关键：页面背景色与导航栏一致
      }
    }
  ]
}

  2. 使用页面生命周期控制渲染
    在 onShow 生命周期中延迟渲染内容，避免切换时的闪烁：

    export default {
  data() {
    return {
      showContent: false
    }
  },
  onShow() {
    setTimeout(() => {
      this.showContent = true
    }, 50)
  }
}

  3. 检查 CSS 层级问题
    确保页面内容层级正确，避免被默认背景覆盖：

    .uni-container {
  position: relative;
  z-index: 1;
  background-color: #007AFF; /* 与导航栏同色 */
}
回到顶部