uniapp：动态修改页面标题

粉末的沉淀2023-10-04 10:47

我们经常遇到这种情况，点击新增按钮，进入一个空白表单页面，点击修改按钮，其实也是进入这个表单页面，只是表单内容已经被数据库的记录反显了，为了区别页面，我们还需要动态设置页面的标题，让客户知道是在做新增还是在做修改。

首先，在跳转前的url里传递参数，这个参数可以自定义，我这里是传递一个对象，需要先将对象参数转为JSON字符串，并使用encodeURIComponent编码。

A页面

javascript 复制代码

<navigator :url="`${url}?record=${encodeURIComponent(JSON.stringify(item))}`"></navigator>

然后在跳转到的页面接收参数，通过判断这个参数值来确定B页面的标题是修改还是新增。

B页面

javascript 复制代码

onLoad(options) {
			console.log(options);
			let record = {};
			if('record' in options){
				uni.setNavigationBarTitle({
					title: '修改',
				});
			   record = JSON.parse(decodeURIComponent(options.params));
			}else{
				uni.setNavigationBarTitle({
					title: '新增'
				});
			}
		},