uniapp:动态修改页面标题

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

首先,在跳转前的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: '新增'
				});
			}
		},
相关推荐
iOS阿玮10 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
2501_9160137412 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184114 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张15 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
耶啵奶膘1 天前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹1 天前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
吴传逞1 天前
记一次uniapp+nutui-uniapp搭建项目
uni-app
雪芽蓝域zzs1 天前
uni-app倒计时公共组件 封装,倒计时组件
uni-app
2501_915918411 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app