23-uni界面:动态设置当前页面的标题颜色和加载状态

286 阅读1分钟

[界面:导航条]

在pages.json页面中设置导航的样式,文档在uni官网 - 全局文件 - pages.json页面路由中

设置demo页面的样式: [在pages.json的demo配置项下,加导航条背景色的设置]

	    {
           "path" : "pages/demo/demo",
           "style" :                                                                                    
           {
               "navigationBarTitleText": "demo页面",
               // 设置demo页面的导航栏背景色
               "navigationBarBackgroundColor": "#c00",
               "enablePullDownRefresh": false
           }
           
       }

在index页面写一个路由跳转到demo页面,就能看到导航条变色了 image.png

在demo页面设置导航的标题文字和样式

在一些自定义的页面会用到

这里设置背景色和前景色有坑,前景色只能设置白色和黑色,必须是十六进制,必须是6位,写三位没效果,单独只设置背景色或者字体色也没用,一起设置才有用(这两个选项是必填项)

<template>
  <view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
      }  
    },
    onLoad() {
      uni.setNavigationBarTitle({
        title:"这是demo页面"
      })
      uni.setNavigationBarColor({
        backgroundColor:"#1aa034",
        frontColor:"#ffffff"
      })
    }
    }
</script>

<style lang="scss">

</style>

uni.showNavigationBarLoading--这个属性app不可用

在当前页面显示导航条加载动画。之前的加载动画是在屏幕中间有一个弹窗展示,可以用这个属性将加载动画写到导航栏中

    onLoad() {
      uni.setNavigationBarTitle({
        title:"这是demo页面"
      });
      uni.setNavigationBarColor({
        backgroundColor:"#1aa034",
        frontColor:"#ffffff"
      });
      uni.showNavigationBarLoading();
      setTimeout(()=>{
        uni.hideNavigationBarLoading()
      },1500)
    }

由于现在没有写网络请求,可以用一个定时器来关闭它 image.png

还有一个隐藏返回按钮的属性,仅小程序支持,app和h5不支持