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字段
路径如图所示

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