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

预览效果如下

相关推荐
moxiaoran57531 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
moxiaoran57533 小时前
uni-app学习笔记二十九--数据缓存
笔记·学习·uni-app
moxiaoran57537 小时前
uni-app学习笔记三十--request网络请求传参
笔记·学习·uni-app
疯狂的沙粒9 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
anyup13 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
alphaair20 小时前
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
uni-app·ai运动·ai运动识别·ai健身·ai体测·ai运动app·ai运动检测·工会云上运动会·ai人体检测·ai姿态识别
moxiaoran57531 天前
uni-app学习笔记二十三--交互反馈showToast用法
笔记·学习·uni-app
Angindem1 天前
从零搭建uniapp项目
前端·vue.js·uni-app
Bug从此不上门1 天前
【无标题】
前端·javascript·uni-app·vue
耶啵奶膘2 天前
uniapp+vue2解构赋值和直接赋值的优缺点
uni-app