uniapp 创建与配置 tabbar

1. 创建页面

2. 删除​​pages​​ 下的 ​​index​​ 文件夹



4. 在​​pages​​ 文件夹处，右键 -> 选择新建页面



6. 确认新建页面的信息



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



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

2. 配置 ​​pages.json​​

1. 删除​​index​​ 路径（这一步咱们上面已经做了）
2. 新建​​tabbar​​ 节点
4. 复制图标资源 文件夹下 ​​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"
      }
    ]
  }
}

5. 效果图