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，等頁面加載完再一起顯示，避免一閃而過的用戶體驗！！！

<view class="match" v-if="showPage">  // 加載過程中主頁面內容隱藏，數據成功再一起顯示出來，防止閃爍！！！

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            // 對標題內容進行設置
            setTitle(){
                uni.setNavigationBarTitle({
                    title: '設置的新的標題'
                });
            },

            // 對顏色和進場動畫進行設置
            setColor(){
                uni.setNavigationBarColor({
                    // 字體顏色 僅支持 #ffffff 和 #000000
                    frontColor: '#000000',
                    //     背景顏色值，有效值為十六進制顏色
                    backgroundColor: '#ff0000',
                    // animation 結構
                    animation: {
                        // duration: 動畫時間
                        duration: 2000,
                        // timingFunc:動畫效果
                            // linear    動畫從頭到尾的速度是相同的。
                            // easeIn    動畫以低速開始
                            // easeOut    動畫以低速結束。
                            // easeInOut    動畫以低速開始和結束
                        timingFunc: 'easeIn'
                    }
                });

            // 關閉加載條
            uni.hideNavigationBarLoading()
            },
            getData(){
               //請求接口成功
               this.$http.post(apis.gameHomePageall, { competitionId: this.id }).then((res) => {
                 if (res.data.code === 200) {
                    this.list = res.data.data                    
                    setTimeout(()=>{
                          this.setTitle() // 把接口請求到的值賦值
                          this.setColor()  
                        },20)
                  }
                })
            }
          },
            onLoad(){
                // 顯示加載條
                uni.showNavigationBarLoading()
            }
        }
    }
</script>

<style>

</style>                              

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

方法二：

使用page-meta頁面屬性配置節點，用於指定頁面的一些屬性、監聽頁面事件。可部分替代pages.json的功能。

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

<template>
    <page-meta>
        <navigation-bar
            :background-color="theme"
            :title="nbTitle"
        />
    </page-meta>
    <view class="match" v-if="showPage">
</view>

 

初始值同樣的避免閃爍，都是等頁面加載完了，再出現

theme: '#F9FAFC', // 微信默認背景，主題色必須是6hex #0064A8
nbTitle:'',