uni-app: Some related settings of the top title bar (title changes, loading effects)

1. Title change 

Effect

Method 1: Modify in pages.json

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "自定义标题"
	}
},

Method 2: Make modifications directly on the page

onLoad() {
	// 设置页面的标题栏名称
	uni.setNavigationBarTitle({
		title: '自定义标题'
	});
}

Generally, it can be used well when the page title is a parameter passed from the previous page, as follows:

onLoad(options) {
	console.log(options.name)//获取到页面的参数
	// 设置页面的标题栏名称
	uni.setNavigationBarTitle({
		title: options.name//将参数作为标题
	});
}

2. Top title bar - page loading effect

Effect

code

Here it is loaded first and closed after one second.

onLoad() {
	// 设置页面的标题栏名称
	uni.setNavigationBarTitle({
		title: '自定义标题'
	});
	// 显示加载状态
	uni.showNavigationBarLoading();
	setTimeout(() => {
		// 隐藏加载状态
		uni.hideNavigationBarLoading();
	}, 1000)
	
}