快捷導(dǎo)航

uniapp小程序配置tabbar底部導(dǎo)航欄實(shí)戰(zhàn)指南

更新時(shí)間：2022年09月14日 16:25:33 作者：「不一」

tabBar如果應(yīng)用是一個(gè)多tab應(yīng)用,可以通過tabBar配置項(xiàng)指定tab欄的表現(xiàn),以及tab切換時(shí)顯示的對(duì)應(yīng)頁,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序配置tabbar底部導(dǎo)航欄的相關(guān)資料,需要的朋友可以參考下

前言：

配置底部導(dǎo)航欄首先需要大家準(zhǔn)備好自己想要使用的圖標(biāo)，每個(gè)tab可以選擇兩個(gè)圖標(biāo)，分別為選中前的和選中后的。之后我們根據(jù)uniapp官網(wǎng)提供的

uniapp官網(wǎng)tabbar配置項(xiàng)，話不多說直接上正文一起來學(xué)習(xí)一下如何配置底部導(dǎo)航欄吧。

正文

首先我們先看一下官網(wǎng)中的介紹：
如果應(yīng)用是一個(gè)多 tab 應(yīng)用，可以通過 tabBar 配置項(xiàng)指定一級(jí)導(dǎo)航欄，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁。
在 pages.json 中提供 tabBar 配置，不僅僅是為了方便快速開發(fā)導(dǎo)航，更重要的是在App和小程序端提升性能。在這兩個(gè)平臺(tái)，底層原生引擎在啟動(dòng)時(shí)無需等待js引擎初始化，即可直接讀取 pages.json 中配置的 tabBar 信息，渲染原生tab。

Tips

當(dāng)設(shè)置 position 為 top 時(shí)，將不會(huì)顯示 icon
tabBar 中的 list 是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè) tab，tab 按數(shù)組的順序排序。
tabbar 切換第一次加載時(shí)可能渲染不及時(shí)，可以在每個(gè)tabbar頁面的onLoad生命周期里先彈出一個(gè)loading。
tabbar 的頁面展現(xiàn)過一次后就保留在內(nèi)存中，再次切換 tabbar 頁面，只會(huì)觸發(fā)每個(gè)頁面的onShow，不會(huì)再觸發(fā)onLoad。
頂部的 tabbar 目前僅微信小程序上支持。需要用到頂部選項(xiàng)卡的話，建議不使用 tabbar 的頂部設(shè)置，而是自己做頂部選項(xiàng)卡，可參考 hello uni-app->模板->頂部選項(xiàng)卡。

1、首先我們準(zhǔn)備好自己項(xiàng)目所需要的tab圖標(biāo)

我這里準(zhǔn)備了6張，分別用于3個(gè)tab切換使用（選中前和選中后的，放在了static文件夾下的tabbar文件夾下：

2、找到我們的pages.json文件進(jìn)行配置

找到globalStyle位置，在它的下方配置我們的tabbar。

代碼片段如下：

// 配置tabbar導(dǎo)航欄
	"tabBar": {
		"borderStyle": "black",
		"selectedColor": "#FB7299",
		"color": "#444444",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/find.png",
				"selectedIconPath": "static/tabbar/find-selected.png",
				"text": "發(fā)現(xiàn)"
			},{
				"pagePath": "pages/cate/cate",
				"iconPath": "static/tabbar/cate.png",
				"selectedIconPath": "static/tabbar/cate-selected.png",
				"text": "分類"
			},{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/tabbar/my.png",
				"selectedIconPath": "static/tabbar/my-selected.png",
				"text": "我的"
			}
		]
	}

相信很多小伙伴不知道這些配置項(xiàng)都是什么意思，如下附上一張官網(wǎng)的配置項(xiàng)截圖，大家也可以從前言內(nèi)容中鏈接去官網(wǎng)自查。（本案例中使用的是一些最基礎(chǔ)的屬性。）

3、配置一下導(dǎo)航欄標(biāo)題內(nèi)容

官網(wǎng)地址給小伙伴們

導(dǎo)航欄標(biāo)題內(nèi)容是我們頁面頂部位置的如下圖所示：

代碼示例如下所示：（本人用的一些常見的配置項(xiàng)，可自行修改）

"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "配置底部導(dǎo)航欄"
			}
		}
	    ,{
            "path" : "pages/mine/mine",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false
            }
            
        },
		{
		    "path" : "pages/cate/cate",
		    "style" :                                                                                    
		    {
				// 導(dǎo)航欄標(biāo)題文字內(nèi)容
		        "navigationBarTitleText": "分類",
				// 是否開啟下拉刷新
		        "enablePullDownRefresh": false
		    }
		    
		}
    ],
	// 默認(rèn)頁面的樣式
	"globalStyle": {
		// 導(dǎo)航欄標(biāo)題顏色及狀態(tài)欄前景顏色，僅支持 black/white
		"navigationBarTextStyle": "black",
		// 導(dǎo)航欄標(biāo)題文字內(nèi)容
		"navigationBarTitleText": "配置底部導(dǎo)航欄",
		// 導(dǎo)航欄背景顏色（同狀態(tài)欄背景色）
		"navigationBarBackgroundColor": "#55aaff",
		// 下拉顯示出來的窗口的背景色
		"backgroundColor": "#ffff7f"
	}