uniapp 设置导航栏（NavigationBar）

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>

效果图