uniapp：tabBar页面如何跳转？

最新推荐文章于 2025-02-28 10:18:51 发布

粉末的沉淀

最新推荐文章于 2025-02-28 10:18:51 发布

阅读量1.2w

点赞数 2

分类专栏： uniapp

本文链接：https://blog.csdn.net/lilycheng1986/article/details/116083128

版权

web app

uniapp 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在uni-app中配置底部tabBar，包括颜色、图标和页面路径设置。同时，讲解了在使用tabBar后，如何通过uni.switchTab正确实现页面间的切换，特别强调了不能使用redirectTo和navigateTo。这对于理解和优化uni-app的导航流程至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们在pages.json里配置好tabBar

// 需要注意，使用了tabBar后，页面跳转就得用switchTab，不能再用redirectTo和navigateTo了
	"tabBar": {
		"color": "#a9b7b7",
		"selectedColor": "#d4237a",
		"borderStyle": "white",
		"list": [{
				"selectedIconPath": "./static/icon/home.png",
				"iconPath": "./static/icon/_home.png",
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"selectedIconPath": "./static/icon/img.png",
				"iconPath": "./static/icon/_img.png",
				"pagePath": "pages/charts/charts",
				"text": "图表"
			},
			{
				"selectedIconPath": "./static/icon/videocamera.png",
				"iconPath": "./static/icon/_videocamera.png",
				"pagePath": "pages/GoodsNav/GoodsNav",
				"text": "购物"
			},
			{
				"selectedIconPath": "./static/icon/search.png",
				"iconPath": "./static/icon/_search.png",
				"pagePath": "pages/rate/rate",
				"text": "评价"
			}
		]
	}

那么对应的4个页面就都会出现tabBar，如果想要通过代码跳转到这几个页面，比如进入到某个子页面后，想返回到首页，需要使用switchTab

goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
				// uni.redirectTo({
				// 	url: '/pages/index/index'
				// })
			}