前言

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

一、tabBar切換

1.為什么使用tabBar

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

2.注意事項

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

3.如何使用

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

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

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

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

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

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

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

text自己起名字

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

我的配置源碼如下，如果需要完整代碼，私信留下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改掉名字

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

到此這篇關于微信小程序tabBar組件切換與下拉刷新實現(xiàn)詳解的文章就介紹到這了,更多相關小程序tabBar內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論