微信小程序tabBar組件切換與下拉刷新實現詳解

Posted on by

前言

基本上，所有的小程序，頁面底部都有個tab,來實現頁面的切換，效果如下

一、tabBar切換

1.為什麼使用tabBar

在 pages.json 中提供 tabBar 配置，不僅僅是為瞭方便快速開發導航，更重要的是在App和小程序端提升性能。在這兩個平臺，底層原生引擎在啟動時無需等待js引擎初始化，即可直接讀取 pages.json 中配置的 tabBar 信息，渲染原生tab。

2.註意事項

  • 當設置 position 為 top 時，將不會顯示 icon
  • tabBar 中的 list 是一個數組，隻能配置最少2個、最多5個 tab，tab 按數組的順序排序。
  • tabbar 切換第一次加載時可能渲染不及時，可以在每個tabbar頁面的onLoad生命周期裡先彈出一個等待雪花（hello uni-app使用瞭此方式）
  • tabbar 的頁面展現過一次後就保留在內存中，再次切換 tabbar 頁面，隻會觸發每個頁面的onShow，不會再觸發onLoad。
  • 頂部的 tabbar 目前僅微信小程序上支持。需要用到頂部選項卡的話，建議不使用 tabbar 的頂部設置，而是自己做頂部選項卡，可參考 hello uni-app->模板->頂部選項卡。

3.如何使用

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

根據自己的要求來配對，我這裡是有四個頁面，分別是【首頁、分類、購物車、我的】

這裡的四個頁面都是在pages中創建的，是主要的四個功能頁面，需要在pages.json註冊（如果使用的HBuilder X 在創建文件夾是，會提示是否在pages.json中註冊，勾取一下就可以），展示一段註冊代碼，如下：

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

pagePath是寫頁面地址，這裡的頁面地址推薦在pages中創建

iconPath是寫圖片地址，圖片放到static中尋找路徑即可，我們每次點擊切換後，為瞭更好的展示效果，圖片都會有點擊前點擊後的狀態，這裡的圖片是點擊前

selectedIconPath這裡就是放點擊後的圖片，與點擊前有明顯的區別，就是為瞭表現出我們點擊到瞭，並且切換瞭

text自己起名字

其中還有許多屬性，可以通過自己對項目開發的要求進行修改和優化，修改官網的默認樣式

我的配置源碼如下，如果需要完整代碼，私信留下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": "我的"
			}]
			}

二、下拉刷新

下拉刷新非常的簡單，隻需要一行代碼就行，需要學會看官網的介紹，這單詞我是記不住

在 pages.json中的globalStyle加上"enablePullDownRefresh":true即可，默認是關閉

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

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

還有很多樣式可以根據官網的註釋進行修改，得到自己想要的樣子

到此這篇關於微信小程序tabBar組件切換與下拉刷新實現詳解的文章就介紹到這瞭,更多相關小程序tabBar內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：