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

陈显江 發表於 2021-5-17 18:19:00

<h2>应用场景：</h2>
需要根据后台设置不同项目的主题色，头部相应的出现颜色，查看我们的uni-app开发文档，发现我们可以用2种方法来实现。
<h3>方法一：</h3>
我们可以使用 
<h3 id="setnavigationbartitle">uni.setNavigationBarTitle(OBJECT)   动态设置当前页面的标题</h3>
<h3 id="setnavigationbarcolor">uni.setNavigationBarColor(OBJECT)   动态设置颜色跟背景色</h3>
以上2个具体用法查看官网 https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbarcolor
 
具体如下
<div class="cnblogs_code">
<pre>onReady(){
uni.setNavigationBarTitle({
 title: '新的标题'
})
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000'
})
}</pre>
</div>
注意
设置完以上代码会发现，在加载的过程中，会先出现页面标题跟颜色的闪烁出现框架内的设置
解决方法
我们可以在页面加载过程中头部统一用系统默认的颜色，等到数据加载完，头部跟页面内容再一起显示，不会有一种一闪而过的颜色
1、在pages.json 对需要的页面进行默认初始值设置，设置如下
<div class="cnblogs_code">
<pre> {
 "path": "pages/index/index",
 "style": {
 "navigationBarBackgroundColor": "#F9FAFC", // 小程序加载过程中页面的默认颜色，防止跟加载过程中闪烁
 "navigationBarTitleText": ""//设置为空，防止加载过程中出现系统默认的uni-app标题文字显示，一闪而过
 }</pre>
</div>
2、在具体页面中，由于我们的主题样式是通过接口请求获取到的数据，我们可以通过，数据请求过程中，头部跟底部页面显示同一个颜色，显示loading，等页面加载完再一起显示，避免一闪而过的用户体验！！！
<div class="cnblogs_code">
<pre><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> </pre>
</div>
 我们可以把方法放到mixin里面，再需要配置的页面使用
<h3>方法二：</h3>
使用page-meta页面属性配置节点，用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。
具体用法：https://uniapp.dcloud.io/component/page-meta
<div class="cnblogs_code">
<pre><template>
<page-meta>
 <navigation-bar
 :background-color="theme"
 :title="nbTitle"
 />
</page-meta>
<view class="match" v-if="showPage">
</view></pre>
</div>
 
初始值同样的避免闪烁，都是等页面加载完了，再出现
theme: '#F9FAFC', // 微信默认背景，主题色必须是6hex #0064A8 nbTitle:'',
  
来源：https://www.cnblogs.com/qdlhj/p/14778017.html

頁: [1]

琼殿技术论坛's Archiver

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