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

陈显江 · 发表于 2021-5-17 18:19:00

应用场景：

需要根据后台设置不同项目的主题色，头部相应的出现颜色，查看我们的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:'',

来源：https://www.cnblogs.com/qdlhj/p/14778017.html