uniapp 创建与配置 tabbar

在这里插入图片描述

1. 创建页面

删除 pages 下的 index 文件夹
在 pages 文件夹处，右键 -> 选择新建页面
确认新建页面的信息

由于咱们删除了默认的index.vue页面，导致编译报错

找到pages.json文件，把鼠标选中部分配置删除即可

2. 配置 `pages.json`

删除 index 路径（这一步咱们上面已经做了）
新建 tabbar 节点
复制 图标资源 文件夹下 tab-icons 文件夹到 static 文件夹中
这个需要自己去图标网站下载
推荐使用阿里图标库
https://www.iconfont.cn/

3. 依次创建me和record页面

在这里插入图片描述

4. 案例源码

最终代码如下：

{"pages": [{"path" : "pages/index/index","style" :                                                                                    {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/me/me","style" :                                                                                    {"navigationBarTitleText": "","enablePullDownRefresh": false}},{"path" : "pages/record/record","style" :                                                                                    {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","app-plus": {"background": "#efeff4"}},"tabBar": {"selectedColor": "#1296db","list": [{"pagePath": "pages/index/index","text": "主页","iconPath": "static/tab-icons/index.png","selectedIconPath": "static/tab-icons/index-active.png"},{"pagePath": "pages/record/record","text": "记录","iconPath": "static/tab-icons/record.png","selectedIconPath": "static/tab-icons/record-active.png"},{"pagePath": "pages/me/me","text": "我的","iconPath": "static/tab-icons/me.png","selectedIconPath": "static/tab-icons/me-active.png"}]}
}