[界面:导航条]
在pages.json页面中设置导航的样式,文档在uni官网 - 全局文件 - pages.json页面路由中
设置demo页面的样式: [在pages.json的demo配置项下,加导航条背景色的设置]
{
"path" : "pages/demo/demo",
"style" :
{
"navigationBarTitleText": "demo页面",
// 设置demo页面的导航栏背景色
"navigationBarBackgroundColor": "#c00",
"enablePullDownRefresh": false
}
}
在index页面写一个路由跳转到demo页面,就能看到导航条变色了
在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)
}
由于现在没有写网络请求,可以用一个定时器来关闭它
还有一个隐藏返回按钮的属性,仅小程序支持,app和h5不支持