uni-app 从零开始第三章：底部 tabBar

原创已于 2023-07-10 16:04:47 修改 · 993 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

于 2023-07-05 13:58:05 首次发布

本文介绍了如何在uni-app中新建页面并配置页面路由，特别是添加底部tabBar的操作，包括设置颜色、文本以及页面路径。通过修改pages.json文件，可以实现小程序的页面管理和底部菜单的显示。

pages.json 页面路由 | uni-app官网

一、新建 home页面

找到pages目录，新增一个home的页面，勾选上同时新建文件夹

新建完成后，pages.json 中会自动添加上刚刚新建的文件信息

二、新增tabBar数据

在 pages.json中新增以下代码

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/index/index",
				// "iconPath": "static/component.png",
				// "selectedIconPath": "static/componentHL.png",
				"text": "主页"
			},
			{
				"pagePath": "pages/home/home",
				// "iconPath": "static/api.png",
				// "selectedIconPath": "static/apiHL.png",
				"text": "首页"
			}
		]
	}