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

码农农码一生

已于 2023-07-10 16:04:47 修改

阅读量965

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app 前端

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

本文链接：https://blog.csdn.net/chenhao_c_h/article/details/131553995

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": "首页"
			}
		]
	}