uniapp 底部导航栏 tabBar

在 static 文件夹中新建文件夹 tabBar,放入标签图片

源素材如下:




在 pages.json 中添加

json 复制代码
	// 底部导航
	"tabBar": {
		// tab默认文字颜色
		"color": "#bfbfbf",
		// tab选中后的文字颜色
		"selectedColor": "#153c65",
		// 底栏列表
		"list": [{
				// tab默认图标路径
				"iconPath": "static/tabBar/tabBar_index_default.png",
				// tab选中后的图标路径
				"selectedIconPath": "static/tabBar/tabBar_index_selected.png",
				// tab跳转的页面路径
				"pagePath": "pages/index/index",
				// tab文字
				"text": "首页"
			},
			{
				"iconPath": "static/tabBar/tabBar_me_default.png",
				"selectedIconPath": "static/tabBar/tabBar_me_selected.png",
				"pagePath": "pages/me/me",
				"text": "我的"
			}
		]
	},

预览效果如下

相关推荐
PedroQue995 小时前
uni-router v1.7.0重磅更新:守卫重定向自由掌控
前端·uni-app
一份执念2 天前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
PedroQue992 天前
V1.6.1性能优化:高频路径提速与代码精简
前端·uni-app
夏碧笔4 天前
uni-app跨端地图实战:用第三方LBS替代微信平台收费服务
uni-app
用户6990304848759 天前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
ITKEY_9 天前
uniapp微信开发者工具 更改AppID失败 touristappid
uni-app
Geek_Vison9 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
CHB10 天前
HDC2026 演讲实录|AI 驱动的跨端进化:利用 uni-agent 快速构建高性能鸿蒙应用
uni-app·harmonyos
2501_9159184110 天前
iOS App性能测试工具的实现方法与优化循环指南
android·ios·小程序·https·uni-app·iphone·webview
斯内普吖10 天前
(开源)高校素拓分管理系统小程序实战指南 基于 Java + SpringBoot + uni-app + Vue + MySQL
java·spring boot·mysql·小程序·uni-app·开源