uniapp小程序如何配置tabbar底部導航欄

這篇文章主要介紹“uniapp小程序如何配置tabbar底部導航欄”，在日常操作中，相信很多人在uniapp小程序如何配置tabbar底部導航欄問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”uniapp小程序如何配置tabbar底部導航欄”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

正文

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

Tips

• 當設置 position 為 top 時，將不會顯示 icon

• tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

• tabbar 切換第一次加載時可能渲染不及時，可以在每個tabbar頁面的onLoad生命周期里先彈出一個loading。

• tabbar 的頁面展現過一次后就保留在內存中，再次切換 tabbar 頁面，只會觸發每個頁面的onShow，不會再觸發onLoad。

• 頂部的 tabbar 目前僅微信小程序上支持。需要用到頂部選項卡的話，建議不使用 tabbar 的頂部設置，而是自己做頂部選項卡，可參考 hello uni-app->模板->頂部選項卡。

1、首先我們準備好自己項目所需要的tab圖標

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

2、找到我們的pages.json文件進行配置

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

代碼片段如下：

// 配置tabbar導航欄
	"tabBar": {
		"borderStyle": "black",
		"selectedColor": "#FB7299",
		"color": "#444444",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/find.png",
				"selectedIconPath": "static/tabbar/find-selected.png",
				"text": "發現"
			},{
				"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": "我的"
			}
		]
	}

3、配置一下導航欄標題內容

官網地址給小伙伴們

導航欄標題內容是我們頁面頂部位置的如下圖所示：

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

"pages": [ //pages數組中第一項表示應用啟動頁
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "配置底部導航欄"
			}
		}
	    ,{
            "path" : "pages/mine/mine",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false
            }
            
        },
		{
		    "path" : "pages/cate/cate",
		    "style" :                                                                                    
		    {
				// 導航欄標題文字內容
		        "navigationBarTitleText": "分類",
				// 是否開啟下拉刷新
		        "enablePullDownRefresh": false
		    }
		    
		}
    ],
	// 默認頁面的樣式
	"globalStyle": {
		// 導航欄標題顏色及狀態欄前景顏色，僅支持 black/white
		"navigationBarTextStyle": "black",
		// 導航欄標題文字內容
		"navigationBarTitleText": "配置底部導航欄",
		// 導航欄背景顏色（同狀態欄背景色）
		"navigationBarBackgroundColor": "#55aaff",
		// 下拉顯示出來的窗口的背景色
		"backgroundColor": "#ffff7f"
	}

4、來看看我們的成果(效果圖)

到此，關于“uniapp小程序如何配置tabbar底部導航欄”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！