先看下效果圖：

底部tab切換的實現主要在App.json中的 tabBar列表。如下圖所示：

接下來詳細介紹一下App.json中的參數

1.默認情況下主要分為Pages和window兩個模塊，tabBar是我們在需要的時候添加進去的

2.pages--我們開發中所寫的頁面路徑都需要引用在這裏

3.windows--設置小程序的狀態欄、導航條、標題、窗口背景色，詳細如下：

4.tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。可查看官方API文檔 tabBar

　　屬性說明：

其中 list 接受一個數組，數組中的每個項都是一個對象，其屬性值如下：

最後我們來看下底部tabBar功能的具體實現

一、首先我們先創建兩個自己所需要的頁面，頁面結構分為js、json、wxml以及wxss四部分組成

　　js:處理頁面邏輯性問題；json:頂部導航名稱命名-navigationBarTitleText；wxml:布局頁面結構；wxss:也就是所謂的樣式css

二、創建一個存放圖片的文件夾，一般都命名為images

三、需要在app.json中配置tabBar，詳細的配置參數說明，在上面已經說明。進行配置就可以了。

四、項目目錄結構

五、附上最終代碼：

{
  "pages":[    
    "pages/home/home",
    "pages/myself/myself",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "首頁table實踐",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首頁",
      "iconPath": "pages/images/home_u.png",
      "selectedIconPath": "pages/images/home.png"
    },
    {
      "pagePath": "pages/myself/myself",
      "text": "我的",
      "iconPath": "pages/images/my_u.png",
      "selectedIconPath": "pages/images/my.png"
    }]
  }
}

官方文檔

小程序--首頁tab選項實現