uni-app中动态设置头部颜色及字体

应用场景：

需要根据后台设置不同项目的主题色，头部相应的出现颜色，查看我们的uni-app开发文档，发现我们可以用2种方法来实现。

方法一：

我们可以使用 

uni.setNavigationBarTitle(OBJECT)   动态设置当前页面的标题

uni.setNavigationBarColor(OBJECT)   动态设置颜色跟背景色

以上2个具体用法查看官网 https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbarcolor

具体如下

onReady(){
    uni.setNavigationBarTitle({
         title: ‘新的标题‘
    })
   uni.setNavigationBarColor({
     frontColor: ‘#ffffff‘,
     backgroundColor: ‘#ff0000‘
   })
}

注意

设置完以上代码会发现，在加载的过程中，会先出现页面标题跟颜色的闪烁出现框架内的设置

解决方法

我们可以在页面加载过程中头部统一用系统默认的颜色，等到数据加载完，头部跟页面内容再一起显示，不会有一种一闪而过的颜色

1、在pages.json 对需要的页面进行默认初始值设置，设置如下

        {
            "path": "pages/index/index",
            "style": {
                "navigationBarBackgroundColor": "#F9FAFC", // 小程序加载过程中页面的默认颜色，防止跟加载过程中闪烁
                "navigationBarTitleText": ""  //  设置为空，防止加载过程中出现系统默认的uni-app标题文字显示，一闪而过
            }

2、在具体页面中，由于我们的主题样式是通过接口请求获取到的数据，我们可以通过，数据请求过程中，头部跟底部页面显示同一个颜色，显示loading，等页面加载完再一起显示，避免一闪而过的用户体验！！！

  // 加载过程中主页面内容隐藏，数据成功再一起显示出来，防止闪烁！！！



                              

 我们可以把方法放到mixin里面，再需要配置的页面使用

方法二：

使用page-meta页面属性配置节点，用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。

具体用法：https://uniapp.dcloud.io/component/page-meta