uniapp 設置導航欄（NavigationBar）

<template>
    <view>
        <button type="primary" @click="setTitle">設置標題</button>
        <button type="primary" @click="setColor">設置顏色（關閉加載條）</button>
    </view>
</template>

<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() 
            },
            onLoad(){
                // 顯示加載條
                uni.showNavigationBarLoading()
            }
        }
    }
</script>

<style>

</style>

效果圖