先上效果图，源码自行下载 《星云erp-移动版》
第一步准备图标
需要准备图标两套，要求背景透明，一套蓝色边的和一套灰色的。
图标可以放项目中，也可以放在服务器上。我这里直接放在static/images/tabbar文件夹下
第二步，配置pages.json (uniapp 项目根目录下)，添加tabBar标签
我这里用的是 《星云erp-移动版》目录如下
添加 tabBar标签下的内容
"tabBar": {
"color": "#000000",
"selectedColor": "#000000",
"borderStyle": "white",
// "backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index",
"iconPath": "static/images/tabbar/home.png",
"selectedIconPath": "static/images/tabbar/home_.png",
"text": "首页"
}, {
"pagePath": "pages/data/index",
"iconPath": "static/images/tabbar/work.png",
"selectedIconPath": "static/images/tabbar/work_.png",
"text": "资料"
}, {
"pagePath": "pages/business/index",
"iconPath": "static/images/tabbar/business.png",
"selectedIconPath": "static/images/tabbar/business_.png",
"text": "业务"
}, {
"pagePath": "pages/report/index",
"iconPath": "static/images/tabbar/report.png",
"selectedIconPath": "static/images/tabbar/report_.png",
"text": "财务"
}, {
"pagePath": "pages/mine/index",
"iconPath": "static/images/tabbar/mine.png",
"selectedIconPath": "static/images/tabbar/mine_.png",
"text": "我的"
}]
},第三步，创建对应菜单页面
需要把pagePath对应的页面创建，否则找不到页面报错，空页面即可
到这里一个底部菜单栏就创建完毕
标签：uniapp,pagePath,菜单栏,static,tabbar,images,搞掂,pages,png From： https://blog.csdn.net/m0_37364725/article/details/144613361