上篇部落格我們已經成功建立頁面，並且顯示我們自己所建立頁面的內容，那麼我們都知道每個專案下面都會有tab bar,當然大部分都有，也不排除沒有的情況啊，那麼這篇我主要是來新增一個tabBar並且 總結一下寫的過程中一個小程式 小白開發者遇到讓人頭疼的問題，並講解解決方法，也許對小程式開發經驗的盆友來說這是一個簡單的問題，但是妹紙，太菜了塞，哈哈

一般來說，tabBar 上的圖示都是引用ui給切好的圖片，當我們是小白是，第一時間是要看關於tabBar的官方文件

或者是百度 tabBar是怎麼來實現的，看文件時 如果我們特別細心時你會發現一個問題

這樣的話你就回告訴UI,給你切圖片時按照上面所示的大小來切，當然大部分我們都沒怎麼在意，有的專案圖片都是ui提前切好的就直接拿來用了，那麼我們現在先用一個ui原來切好的圖片來實現一個 tabBar

1.新增tab

① 建立一個資料夾來放圖片

當然我只是按照我的習慣來建立檔案，我會不同模組兒的圖片都分開放在不同的資料夾內，如下圖：當然不要被我改變你們自己的習慣啊

② 建立每個tab所對應的page頁面；建立page頁面上一篇講過了，不會的同學看上一篇啊，建立完如下圖：

③tabBar 再App.json中的配置：程式碼如下：

 "tabBar": {
    "color": "#282828",
    "selectedColor": "#E31436",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/test/test",
        "text": "頁面一",
        "iconPath": "images/tab/tab-one-nor.png",
        "selectedIconPath": "images/tab/tab-one-sel.png"
      },
      {
        "pagePath": "pages/two-page/two-page",
        "text": "頁面二",
        "iconPath": "images/tab/tab-two-nor.png",
        "selectedIconPath": "images/tab/tab-two-sel.png"
      },
      {
        "pagePath": "pages/three-page/three-page",
        "text": "頁面三",
          "iconPath": "images/tab/tab-three-nor.png",
          "selectedIconPath": "images/tab/tab-three-sel.png"
      },
      {
        "pagePath": "pages/four-page/four-page",
        "text": "頁面四",
        "iconPath": "images/tab/tab-four-nor.png",
        "selectedIconPath": "images/tab/tab-four-sel.png"
      }
    ]
  }
 

頁面效果如下：

不過呢這並沒有結束，讓開發者頭疼的來了，就是按照ui切圖來，這並不好看，可以看的出來tabBar的圖片太大不美觀，即使我按照官方文件那樣的標準切圖還是這樣 那麼怎麼解決呢，

解決方法就是讓ui切圖的時候旁邊空白留多些，這樣圖片還是那麼大但是空白多了圖示也就小了，我們換一個我讓ui按照前面說的來切，效果如下圖：當然我只是想讓你看怎麼變小，空白多少還要你和ui設計師配合，只到她滿意為止

那麼有些同學還是不太明白 那麼我就對比一下兩個圖示的不同之處，如下圖：

那麼現在看到上面的對比你明白了嗎？接下來把其他的圖示自己也都換換就ok了

下面我們總結一下tabBar的屬性

其他的tabBar上的功能也可以自己試一下啊，這些屬性都是在下圖設定的

這篇就到這了，有什麼問題一定要提出來啊，謝謝啦！