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

预览效果如下

相关推荐
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
HebyH_2 天前
uniapp如何封装uni.request 全局使用
uni-app
随笔记3 天前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的3 天前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
随笔记3 天前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
于慨3 天前
uniapp上传文件
前端·uni-app
猫头_3 天前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app
iOS阿玮3 天前
凭一己之力干穿一个品牌,互联网+时代口碑比以前更重要了!
uni-app·app·apple
前端amanda3 天前
uniapp中uview组件中u-input格式化后赋值踩坑
前端·javascript·uni-app