uni-app 导航栏背景颜色与预期结果不一致

uni-app 导航栏背景颜色与预期结果不一致

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

uni.navigateTo({  
    url: '/pages/user/agreement'  
})

{  
    "pages": [{  
        "path": "pages/user/login",  
        "style": {  
            "navigationBarTitleText": "登录",  
            "app-plus": {  
                "titleNView": false //禁用原生导航栏  
            }  
        }  
    }, {  
        "path": "pages/user/agreement",  
        "style": {  
            "navigationBarTitleText": "agreement"  
        }  
    }],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "系统平台",  
        "navigationBarBackgroundColor": "#0064BF",  
        "backgroundColor": "#F8F8F8",  
        "titleImage": "/static/img/head/mobileLogo.png",  
        "app-plus": {  
            "background": "#efeff4",  
            "titleNView": {  
                "backButton": { //自定义 backButton  
                    "color": "#ffffff"  
                }  
            }  
        }  
    }  
}

<template>  
  <view class="container">  
    <view class="wrap">  
      <text class="section">       第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</text>  
      <text class="section">       第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段</text>  
    </view>  
  </view>  
</template>  

<script>  
export default {  

}  
</script>  

<style lang="scss" scoped>  
</style>

更多关于uni-app 导航栏背景颜色与预期结果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 导航栏背景颜色与预期结果不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的代码和描述，问题出在导航栏配置的优先级上。

在你的配置中：

  1. pages/user/login 页面通过 "app-plus": { "titleNView": false } 禁用了原生导航栏
  2. pages/user/agreement 页面没有单独配置，会使用全局样式
  3. 全局样式中设置了 "navigationBarBackgroundColor": "#0064BF"

但在App端（plus环境），导航栏背景色实际上由 app-plus.titleNView.backgroundColor 控制，而不是 navigationBarBackgroundColor。

解决方案：

修改 pages/user/agreement 页面的配置：

{
    "path": "pages/user/agreement",
    "style": {
        "navigationBarTitleText": "agreement",
        "app-plus": {
            "titleNView": {
                "backgroundColor": "#0064BF",  // 设置导航栏背景色
                "titleColor": "#ffffff"        // 设置标题颜色
            }
        }
    }
}

或者在全局样式中统一配置：

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "系统平台",
    "navigationBarBackgroundColor": "#0064BF",
    "backgroundColor": "#F8F8F8",
    "app-plus": {
        "titleNView": {
            "backgroundColor": "#0064BF",  // App端导航栏背景色
            "titleColor": "#ffffff",       // 标题颜色
            "backButton": {
                "color": "#ffffff"         // 返回按钮颜色
            }
        }
    }
}
回到顶部