tabBar組件

一. 全局配置

我們可以通過對項目根目錄下的app.json文件實現(xiàn)對微信小程序的全局配置粘优，該文件的內(nèi)容是一個Json對象啡氢。詳見：微信小程序官方文檔孩等。

apps.png
tabBar是小程序客戶端底部或頂部tab欄的實現(xiàn)斥赋。

二. tabBar相關(guān)屬性

1. list

list是一個長度為2-5的數(shù)組璃哟，它定義了tab 的列表氛琢，也就是說至少必須有2 個、至多可以有 5 個 tab随闪。包含一下4個屬性：

pagePath: 即頁面的路徑阳似，需要在pages中先定義。

text: tab上按鈕文字铐伴。

iconPath: 圖片路徑撮奏，icon 大小限制為 40kb，建議尺寸為 81px * 81px当宴，不支持網(wǎng)絡(luò)圖片畜吊。
當 position 為 top 時，不顯示 icon户矢。

selectedIconPath: 選中時的圖片路徑玲献，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片捌年。當 position 為 top 時瓢娜，不顯示 icon。

參考配置 (app.json)：

    "list": [{
      "pagePath": "pages/index/index",
      "text": "主頁",
      "iconPath": "resource/tabBar/home.png",
      "selectedIconPath": "resource/tabBar/home-1.png"
    },
    {
      "pagePath": "pages/1-Icon/test",
      "text": "菜單",
      "iconPath": "resource/tabBar/menu.png",
      "selectedIconPath": "resource/tabBar/menu-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "購物車",
      "iconPath": "resource/tabBar/car.png",
      "selectedIconPath": "resource/tabBar/car-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "我的",
      "iconPath": "resource/tabBar/mine.png",
      "selectedIconPath": "resource/tabBar/mine-1.png"
    }]

2. color

tab 上的文字默認顏色礼预，僅支持十六進制顏色

    "color": "#dbdbdb",

3. selectedColor

tab 上的文字選中時的顏色眠砾，僅支持十六進制顏色

    "selectedColor": "#1296db",

4. backgroundColor

tab 的背景色，僅支持十六進制顏色

    "backgroundColor": "#ffffff",

5. borderStyle

tabbar 上邊框的顏色托酸，默認值是: black褒颈，僅支持 black / white。

   "borderStyle": "black",    //  black / white

6. position

tabBar 的位置获高，默認值是: bottom哈肖，僅支持 bottom / top。
注意：當position屬性被設(shè)置為頂部top時念秧，只顯示文本不顯示icon淤井。

   "position": "bottom",    //  bottom / top

7. custom

此外，小程序還支持自定義tabBar來滿足更多個性化的場景摊趾，可以通過custom屬性的定義配合自定義組件來實現(xiàn)币狠。詳見官方文檔: 自定義tabBar。
示例配置:

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "組件"
    }, 
    {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}    // 所有tab頁的json里需聲明usingComponents項砾层，也可以在app.json中全局開啟
}

三. 實現(xiàn)步驟

在根目錄下新建resource/icon文件夾漩绵，把從網(wǎng)上找來的icon放在此目錄下。icon可以從阿里巴巴或谷歌的矢量圖標庫尋找: 阿里巴巴矢量圖標庫肛炮。
根據(jù)實際需求在根目錄下 app.json 文件中實現(xiàn)對 tabBar 的配置止吐。
實現(xiàn)具體的配置頁面。
app.json:

{
  "pages": [
    "pages/1-Icon/test",
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib",
    "pages/openapi/openapi",
    "pages/openapi/serverapi/serverapi",
    "pages/openapi/callback/callback",
    "pages/openapi/cloudid/cloudid",
    "pages/im/im",
    "pages/im/room/room"
  ],
  "tabBar": {
    "color": "#dbdbdb",
    "selectedColor": "#1296db",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主頁",
      "iconPath": "resource/tabBar/home.png",
      "selectedIconPath": "resource/tabBar/home-1.png"
    },
    {
      "pagePath": "pages/1-Icon/test",
      "text": "菜單",
      "iconPath": "resource/tabBar/menu.png",
      "selectedIconPath": "resource/tabBar/menu-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "購物車",
      "iconPath": "resource/tabBar/car.png",
      "selectedIconPath": "resource/tabBar/car-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "我的",
      "iconPath": "resource/tabBar/mine.png",
      "selectedIconPath": "resource/tabBar/mine-1.png"
    }]
  },
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云開發(fā) QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

四. 效果

effect.png

最后編輯于：2020.09.20 16:10:59

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者