uniapp 底部菜单_uni-app项目设置底部tabbar

找到pages.json进行配置

添加tabBar字段，然后设置list

list对应的就是tab菜单选项

然后就是要设置tabbar的菜单图片，这个随你，我是直接放一个logo文件的

list最少两个，最多五个

"tabBar": {

"color": "#C0C4CC", //未选中的菜单文字颜色

"selectedColor": "#fa436a", //选中时的菜单文字颜色

"borderStyle": "black",

"backgroundColor": "#ffffff", //背景

"list": [{

"pagePath": "pages/index/index", //页面地址

"iconPath": "static/logo.png", //未选中时的图片

"selectedIconPath": "static/logo.png", //选中时的图片

"text": "首页" //菜单文字

},

{

"pagePath": "pages/home/index",

"iconPath": "static/logo.png",

"selectedIconPath": "static/logo.png",

"text": "首页"

}

]

}

然后就是设置页面了， tabbar里面的页面必须存在

所以也要设置pages.json里面的pages字段

路径如图所示

然后编译在浏览器即可查看 第一次编译应该编辑器应该会自动下载插件，之后就不用了