uniapp 建立與配置 tabbar

1. 建立頁面

1. 删除​

   ​pages​

   ​ 下的 ​

   ​index​

   ​ 檔案夾



2. 在​

   ​pages​

   ​ 檔案夾處，右鍵 -> 選擇建立頁面



3. 确認建立頁面的資訊



4. 由于咱們删除了預設的index.vue頁面，導緻編譯報錯



5. 找到pages.json檔案，把滑鼠選中部配置設定置删除即可

2. 配置 ​

​pages.json​

​

1. 删除​

   ​index​

   ​ 路徑（這一步咱們上面已經做了）
2. 建立​

   ​tabbar​

   ​ 節點
3. 複制圖示資源 檔案夾下 ​

   ​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. 效果圖