位置: IT常识 - 正文
uni-app动态修改导航栏标题(uniapp动态修改pages.json)
编辑：rootadminuni-app动态修改导航栏标题 
本文链接地址:https://www.jiuchutong.com/zhishi/292265.html
转载请保留说明！
推荐整理分享uni-app动态修改导航栏标题(uniapp动态修改pages.json)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uniapp动态修改样式,UniAPP动态修改数据,uniapp动态修改背景色,uniapp动态修改api接口,uniapp动态修改pages.json,uniapp动态修改背景色,uniapp动态修改pages.json,uniapp动态修改title,内容如对您有帮助，希望把文章链接给更多的朋友！
对导航栏标题进行修改，直接使用就可以
uni.setNavigationBarTitle({ title: "标题名称"});动态修改标题名称，数据可能是从上一个页面传递过来的，直接在onLoad页面周期函数中使用
onLoad(props) {console.log(props,"onLoad");//获取上一个页面传递的数据if (props?.title) { const titleType = props.title; let barTitle = "预约会议"; switch (titleType) { case "order": barTitle = '预约会议'; break; case "create": barTitle = '创建会议'; break; case "edit": barTitle = '编辑会议'; break; default: break; } uni.setNavigationBarTitle({ title: barTitle }); }}⚠️可能会出现在网页中切换标题正常，但是在真机中没有效果，通过查看官网看到这么一句话
如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须onShow内执行需要延迟一小段时间 打印页面生命周期发现onLoad先于onReady执行，所以即使数据是上一个页面传递过来的，也不会影响标题的展示。 第一步，我们可以在data中定义一个变量headerTitle
data(){return {headerTitle:"",//导航栏的标题}}第二步，在onLoad页面周期中去获取上一个页面传递的参数，然后对headerTitle进行赋值，方便我们接下来的使用
onLoad(props) {console.log(props,"onLoad");//获取上一个页面传递的数据if (props?.title) { const titleType = props.title; let barTitle = "预约会议"; switch (titleType) { case "order": barTitle = '预约会议'; break; case "create": barTitle = '创建会议'; break; case "edit": barTitle = '编辑会议'; break; default: break; } this.headerTitle=barTitle }}最后，需要在onReady中进行设置标题，⚠️onReady中没有接收的参数
onReady(){ uni.setNavigationBarTitle({ title: this.headerTitle });}通过借助两个页面周期函数，可以实现动态修改导航栏标题
上一个页面传递的参数
const type = 'create';//传递给下一个页面的参数uni.navigateTo({ url: `/pages/bookAMeeting/index?title=${type}`})上一篇：连夜看了30多篇改进YOLO的中文核心期刊 我似乎发现了一个能发论文的规律(一天看小说十几个小时的人)
下一篇：亚运村夜景，北京 (© ViewStock/Getty Images)(亚运村夜宵地方)
