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": "我的"
			}
		]
	},

预览效果如下

相关推荐
_AaronWong4 小时前
微信小程序同声传译插件接入实战:语音识别功能完整实现指南
前端·微信小程序·uni-app
赵庆明老师11 小时前
Uniapp微信小程序开发:http请求封装。
http·微信小程序·uni-app
雪芽蓝域zzs11 小时前
uniapp AES 加密解密
开发语言·uni-app·c#
我是高手高手高高手11 小时前
uni-app x 左右滑动效果
uni-app
居安思危_Ho1 天前
RK平台Uniapp自启动缓存问题解决
android·缓存·uni-app·rk平台·uniapp资源文件
你真的可爱呀1 天前
uniapp学习【项目创建+项目结构解析】
学习·uni-app
小小弯_Shelby1 天前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
卷Java1 天前
百度AI车牌识别配置指南
java·开发语言·百度·uni-app·dubbo·微信公众平台
游戏开发爱好者81 天前
苹果iOS26系统升级:液态玻璃与智能功能全解析
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
2501_915918411 天前
iOS 26 App 性能测试|性能评测|iOS 26 性能对比:实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone