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: '新增'
				});
			}
		},
相关推荐
百思可瑞教育1 天前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
风早爽太1 天前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
Autumn_yun1 天前
uniapp 实现项目多语言切换
uni-app
懒大王95271 天前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王95271 天前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
百思可瑞教育1 天前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling5552 天前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
百思可瑞教育2 天前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
Q_Q19632884752 天前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育2 天前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育