目录

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: '新增'
				});
			}
		},
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
三天不学习18 小时前
Uniapp 集成极光推送(JPush)完整指南
uni-app·jpush 极光推送
前端MXY1 天前
Uni-App uni-combox下拉框被遮挡-分析-解决
前端·uni-app
源码_V_saaskw2 天前
场馆预定系统小程序PHP+uniapp
微信小程序·小程序·uni-app·php
小徐_23332 天前
uni-app工程实战:基于vue-i18n和i18n-ally的国际化方案
前端·微信小程序·uni-app
前端小趴菜052 天前
UniApp Vue 3 中的网络请求封装及用法
前端·vue.js·uni-app
wocwin2 天前
uniapp微信小程序基于wu-input二次封装TInput组件(支持点击下拉选择、支持整数、电话、小数、身份证、小数点位数控制功能)
微信小程序·uni-app
qq_316837752 天前
uniapp App页面通过 web-view 调用网页内方法
前端·uni-app
前端小鸡2 天前
uniapp的v-for不显示或者swiper-item的不显示
uni-app
艾路菲尔2 天前
uniapp小程序登录失效后操作失灵问题
小程序·uni-app