uniapp设置tabBar底部导航栏（vue3通用）

最近在用uniapp开发一款淘客程序，也好久没写博客了，慢慢的发现还是写博客比较好，好记性不如烂笔头，就算有些很简单的东西如果不记录的话，时间一长，如果再用到，还得重新读文档，感觉多多少少会浪费一些时间。所以，博客，写起来！

uniapp设置tabBar底部导航栏（vue3通用）

找到page.json文件，直接配置：

"tabBar": {
    "color": "#333333",
    "selectedColor": "#FE3A33",
    "borderStyle": "black",
    "backgroundColor": "#FFFFFF",
    "list": [{
	"pagePath": "pages/index/index",
	"iconPath": "static/tabBar/home.png",
	"selectedIconPath": "static/tabBar/homeActive.png",
	"text": "首页"
	},{
	"pagePath": "pages/takeout/takeout",
	"iconPath": "static/tabBar/classify.png",
	"selectedIconPath": "static/tabBar/classifyActive.png",
	"text": "外卖"
	},{
	"pagePath": "pages/discover/discover",
	"iconPath": "static/tabBar/goods.png",
	"selectedIconPath": "static/tabBar/goodsActive.png",
	"text": "发现"
	}, {
	"pagePath": "pages/person/person",
	"iconPath": "static/tabBar/mine.png",
	"selectedIconPath": "static/tabBar/mineActive.png",
	"text": "我的"
	}
	]
},

其中，list数组里面写的就是uniapp的底部导航栏，pagePath是指页面路径（必须是在pages里注册的路径），iconPath就是底部导航栏的图标了，而selectedIconPath是底部导航栏选中时的图标，text就是底部导航栏的文字标题了。