uni-app设置导航条（动态设置标题、设置导航条颜色、显示与隐藏导航条标题加载效果）

系统管理员 2023-06-13 09:59 8阅读 0赞

<template>
    	<view class="content">
    		<view @click="amend">动态设置当前页面的标题</view>
    
    	</view>
    </template>
    
    <script>
    	export default {
    		methods: {
    			//动态设置当前页面的标题。
    			amend() {
    				uni.hideNavigationBarLoading();
    				uni.setNavigationBarTitle({
    					title: '新的标题'
    				});
    			}
    		}
    	}
    </script>
    
    <style scoped lang="scss">
    	.content {}
    </style>

### 详细介绍[设置导航条][Link 1]（动态设置当前页面的标题、设置页面导航条颜色、在当前页面显示导航条加载动画、在当前页面隐藏导航条加载动画），官方地址链接：[https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle][https_uniapp.dcloud.io_api_ui_navigationbar_id_setnavigationbartitle] ###

--------------------

## 给一个单独的页面隐藏顶部的 导航栏 可以在pages.json里 单独的路由style下面配置  "app-plus": \{"titleNView": false\} ： ##

{
    	"path": "pages/gather/initialSuccess",
    	"style": {
    		"navigationBarTitleText": "初审成功",
    		"app-plus":{"titleNView":false}
            }
    }

官方链接地址：[https://uniapp.dcloud.io/collocation/pages?id=app-plus][https_uniapp.dcloud.io_collocation_pages_id_app-plus]

[Link 1]: https://uniapp.dcloud.io/api/ui/navigationbar
[https_uniapp.dcloud.io_api_ui_navigationbar_id_setnavigationbartitle]: https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle
[https_uniapp.dcloud.io_collocation_pages_id_app-plus]: https://uniapp.dcloud.io/collocation/pages?id=app-plus