前言

本節(jié)我們使用uni app的底部導(dǎo)航功能，點擊不同tab會顯示不同頁面，這個功能在實際項目開發(fā)中幾乎是必備的。

一、基礎(chǔ)知識

1.tabBar

如果應(yīng)用是一個多 tab 應(yīng)用，可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應(yīng)頁。

Tips

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

常用參數(shù)如下所示，更多內(nèi)容見官網(wǎng)tabBar說明：https://uniapp.dcloud.io/collocation/pages?id=tabbar

屬性類型必填默認值描述平臺差異說明colorHexColor是tab 上的文字默認顏色selectedColorHexColor是tab 上的文字選中時的顏色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上邊框的顏色， 可選值 black/whiteApp 2.3.4+ 支持 其他顏色值listArray是tab 的列表，詳見 list 屬性說明， 最少2個、最多5個 tab

"tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/component/index", "iconPath": "static/image/icon_component.png", "selectedIconPath": "static/image/icon_component_HL.png", "text": "組件" }, { "pagePath": "pages/API/index", "iconPath": "static/image/icon_API.png", "selectedIconPath": "static/image/icon_API_HL.png", "text": "接口" }]}

二、示例

將上一講app02工程復(fù)制為app003,然后拖到HBuilder X中。

1.新建導(dǎo)航頁面

右擊pages

點擊新建頁面，選擇默認模板

添加推薦頁面、我的頁面，完成后，頁面如下

其中，navigationBarTitleText設(shè)置了主頁標題。

2.配置底部導(dǎo)航

準備Tabar圖標如下：

在pages.json文件中，增加Tabar配置如下：

"tabBar":{ "color":"#AAAAAA", "selectedColor":"#007AFF", "backgroundColor":"#FFFFFF", "borderStyle":"black", "list":[ { "pagePath":"pages/index/index", "text":"首頁", "iconPath":"static/home.png", "selectedIconPath":"static/home_selected.png" }, { "pagePath":"pages/recommand/recommand", "text":"推薦", "iconPath":"static/recommand.png", "selectedIconPath":"static/recommand_selected.png" }, { "pagePath":"pages/my/my", "text":"我的", "iconPath":"static/my.png", "selectedIconPath":"static/my_selected.png" } ]}

三、運行

點擊運行--->運行到瀏覽器--->Chome

web端顯示如下：

點擊按鈕，切換為我的頁面

Android具體運行過程不在描述，如有疑問，請看第一節(jié)，安裝后界面如下：

寄語：無限風光在險峰！

總結(jié)

以上是生活随笔為你收集整理的切换 uniapp_万能前端框架uni app初探03：底部导航开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。