鋒哥原創(chuàng)的uni-app視頻教程：
2023版uniapp從入門到上天視頻教程(Java后端無廢話版)，火爆更新中..._嗶哩嗶哩_bilibili2023版uniapp從入門到上天視頻教程(Java后端無廢話版)，火爆更新中...共計23條視頻，包括：第1講 uni-app簡介、第2講 uni-app環(huán)境搭建、第3講 uni-app之HelloWorld實現(xiàn)等，UP主更多精彩視頻，請關(guān)注UP賬號。https://www.bilibili.com/video/BV1eG411N71c/如果應(yīng)用是一個多 tab 應(yīng)用，可以通過 tabBar 配置項指定一級導(dǎo)航欄，以及 tab 切換時顯示的對應(yīng)頁。
在 pages.json 中提供 tabBar 配置，不僅僅是為了方便快速開發(fā)導(dǎo)航，更重要的是在App和小程序端提升性能。在這兩個平臺，底層原生引擎在啟動時無需等待js引擎初始化，即可直接讀取 pages.json 中配置的 tabBar 信息，渲染原生tab。
Tips
-
當(dāng)設(shè)置 position 為 top 時，將不會顯示 icon
-
tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。
-
tabbar 切換第一次加載時可能渲染不及時，可以在每個tabbar頁面的onLoad生命周期里先彈出一個等待雪花（hello uni-app使用了此方式）
-
tabbar 的頁面展現(xiàn)過一次后就保留在內(nèi)存中，再次切換 tabbar 頁面，只會觸發(fā)每個頁面的onShow，不會再觸發(fā)onLoad。
-
頂部的 tabbar 目前僅微信小程序上支持。需要用到頂部選項卡的話，建議不使用 tabbar 的頂部設(shè)置，而是自己做頂部選項卡，可參考 hello uni-app->模板->頂部選項卡。
屬性說明：文章來源：http://www.zghlxwxcb.cn/news/detail-766508.html
| 屬性 | 類型 | 必填 | 默認(rèn)值 | 描述 | 平臺差異說明 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默認(rèn)顏色 | ||
| selectedColor | HexColor | 是 | tab 上的文字選中時的顏色 | ||
| backgroundColor | HexColor | 是 | tab 的背景色 | ||
| borderStyle | String | 否 | black | tabbar 上邊框的顏色，可選值 black/white，也支持其他顏色值 | App 2.3.4+ 、H5 3.0.0+ |
| blurEffect | String | 否 | none | iOS 高斯模糊效果，可選值 dark/extralight/light/none（參考:使用說明） | App 2.4.0+ 支持、H5 3.0.0+（只有最新版瀏覽器才支持） |
| list | Array | 是 | tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab | ||
| position | String | 否 | bottom | 可選值 bottom、top | top 值僅微信小程序支持 |
| fontSize | String | 否 | 10px | 文字默認(rèn)大小 | App 2.3.4+、H5 3.0.0+ |
| iconWidth | String | 否 | 24px | 圖標(biāo)默認(rèn)寬度（高度等比例縮放） | App 2.3.4+、H5 3.0.0+ |
| spacing | String | 否 | 3px | 圖標(biāo)和文字的間距 | App 2.3.4+、H5 3.0.0+ |
| height | String | 否 | 50px | tabBar 默認(rèn)高度 | App 2.3.4+、H5 3.0.0+ |
| midButton | Object | 否 | 中間按鈕 僅在 list 項為偶數(shù)時有效 | App 2.3.4+、H5 3.0.0+ | |
| iconfontSrc | String | 否 | list設(shè)置 iconfont 屬性時，需要指定字體文件路徑 | App 3.4.4+、H5 3.5.3+ |
其中 list 接收一個數(shù)組，數(shù)組中的每個項都是一個對象，其屬性值如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-766508.html
| 屬性 | 類型 | 必填 | 說明 | 平臺差異 |
|---|---|---|---|---|
| pagePath | String | 是 | 頁面路徑，必須在 pages 中先定義 | |
| text | String | 是 | tab 上按鈕文字，在 App 和 H5 平臺為非必填。例如中間可放一個沒有文字的+號圖標(biāo) | |
| iconPath | String | 否 | 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當(dāng) position 為 top 時，此參數(shù)無效，不支持網(wǎng)絡(luò)圖片，不支持字體圖標(biāo) | |
| selectedIconPath | String | 否 | 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當(dāng) position 為 top 時，此參數(shù)無效 | |
| visible | Boolean | 否 | 該項是否顯示，默認(rèn)顯示 | App (3.2.10+)、H5 (3.2.10+) |
| iconfont | Object | 否 | 字體圖標(biāo)，優(yōu)先級高于 iconPath | App（3.4.4+）、H5 (3.5.3+) |
"tabBar": {
"color": "#FF8C00",
"selectedColor":"#B22222",
"backgroundColor":"#FFFAFA",
"borderStyle":"black",
"position":"bottom",
"list": [
{
"text": "主頁",
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/icon/_home.png",
"selectedIconPath": "static/tabbar/icon/home.png"
},
{
"text": "分類",
"pagePath": "pages/classification/classification",
"iconPath": "static/tabbar/icon/_classification.png",
"selectedIconPath": "static/tabbar/icon/classification.png"
},
{
"text": "購物車",
"pagePath": "pages/cart/cart",
"iconPath": "static/tabbar/icon/_cart.png",
"selectedIconPath": "static/tabbar/icon/cart.png"
},
{
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "static/tabbar/icon/_my.png",
"selectedIconPath": "static/tabbar/icon/my.png"
}
]
}到了這里，關(guān)于uni-app tabbar組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
