微信小程序tabBar組件切換與下拉刷新實(shí)現(xiàn)詳解

更新時(shí)間：2022年10月25日 16:51:40 作者：小余努力搬磚

tabBar相對(duì)而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

基本上，所有的小程序，頁面底部都有個(gè)tab,來實(shí)現(xiàn)頁面的切換，效果如下

一、tabBar切換

1.為什么使用tabBar

在 pages.json 中提供 tabBar 配置，不僅僅是為了方便快速開發(fā)導(dǎo)航，更重要的是在App和小程序端提升性能。在這兩個(gè)平臺(tái)，底層原生引擎在啟動(dòng)時(shí)無需等待js引擎初始化，即可直接讀取 pages.json 中配置的 tabBar 信息，渲染原生tab。

2.注意事項(xiàng)

當(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è)等待雪花（hello uni-app使用了此方式）
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)卡。

3.如何使用

tabBar是全局文件，需要在 pages.json配置

根據(jù)自己的要求來配對(duì)，我這里是有四個(gè)頁面，分別是【首頁、分類、購物車、我的】

這里的四個(gè)頁面都是在pages中創(chuàng)建的，是主要的四個(gè)功能頁面，需要在pages.json注冊(cè)（如果使用的HBuilder X 在創(chuàng)建文件夾是，會(huì)提示是否在pages.json中注冊(cè)，勾取一下就可以），展示一段注冊(cè)代碼，如下：

{
     "path" : "pages/cart/cart",
     "style" :                                                                                    
{
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false,
		 "navigationBarTitleText": "小余努力搬磚"
}
}

pagePath是寫頁面地址，這里的頁面地址推薦在pages中創(chuàng)建

iconPath是寫圖片地址，圖片放到static中尋找路徑即可，我們每次點(diǎn)擊切換后，為了更好的展示效果，圖片都會(huì)有點(diǎn)擊前點(diǎn)擊后的狀態(tài)，這里的圖片是點(diǎn)擊前

selectedIconPath這里就是放點(diǎn)擊后的圖片，與點(diǎn)擊前有明顯的區(qū)別，就是為了表現(xiàn)出我們點(diǎn)擊到了，并且切換了

text自己起名字

其中還有許多屬性，可以通過自己對(duì)項(xiàng)目開發(fā)的要求進(jìn)行修改和優(yōu)化，修改官網(wǎng)的默認(rèn)樣式

我的配置源碼如下，如果需要完整代碼，私信留下qq郵箱

	"tabBar": {
			"color": "#7A7E83",
			"selectedColor": "#3cc51f",
			"borderStyle": "black",
			"backgroundColor": "#ffffff",
			"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/index.png",
				"selectedIconPath": "static/tabbar/indexSelected.png",
				"text": "首頁"
			}, {
				"pagePath": "pages/class/class",
				"iconPath": "static/tabbar/class.png",
				"selectedIconPath": "static/tabbar/classSelected.png",
				"text": "分類"
			},{
				"pagePath": "pages/cart/cart",
				"iconPath": "static/tabbar/cart.png",
				"selectedIconPath": "static/tabbar/cartSelected.png",
				"text": "購物車"
			},{
				"pagePath": "pages/my/my",
				"iconPath": "static/tabbar/my.png",
				"selectedIconPath": "static/tabbar/mySelected.png",
				"text": "我的"
			}]
			}

二、下拉刷新

下拉刷新非常的簡(jiǎn)單，只需要一行代碼就行，需要學(xué)會(huì)看官網(wǎng)的介紹，這單詞我是記不住

在 pages.json中的globalStyle加上"enablePullDownRefresh":true即可，默認(rèn)是關(guān)閉

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "小余努力搬磚",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"enablePullDownRefresh":true  //此處就是控制下拉刷新
	},

如果想要改名字，需要先將"navigationBarTitleText": "uni-app"注釋掉，再到globalStyle中的navigationBarTitleText改掉名字

還有很多樣式可以根據(jù)官網(wǎng)的注釋進(jìn)行修改，得到自己想要的樣子