uniapp动态改变顶部导航栏title

需求: 页面中给定tabbar,要求根据当前选中tabbar改变顶部导航栏title

tabbar组件中传入数组即为tabbar项目,因为可以拿到tabar各项,使用@clickHandle接收tabbar传递的事件,参数为tabbarItem的index

分两步:

  1. :根据文档要求,onReady中使用uni.setNavigationBarTitle,在页面渲染时设置当前顶部导航栏内容
	// 刚进入时设置为第0项
		onReady() {
			let _this = this
			uni.setNavigationBarTitle({
				title:_this.tabBarItem[0]
			})
		},
  1. : 设置在点击tabbar时再次设置当前index的内容为顶部tabbar的内容
			// 切换时使用索引
			toggleTabBar(index) {
				this.currentindex = index
				// 在初始化时配置为0,将当前的tabbaritem项变成当前的navbar名
				let _this = this
				uni.setNavigationBarTitle({
					title:_this.tabBarItem[index]
				})
			},

这样,就完成了相应需求。

以上。

uniapp动态改变顶部导航栏title

上一篇:uinApp nvue如何使用阿里图标iconfont


下一篇:突破SSL Pinning抓app的数据包