前言

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

一、基礎知識

1.tabBar

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

Tips

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

常用參數如下所示，更多內容見官網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工程復制為app003,然后拖到HBuilder X中。

1.新建導航頁面

右擊pages

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

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

其中，navigationBarTitleText設置了主頁標題。

2.配置底部導航

準備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具體運行過程不在描述，如有疑問，請看第一節，安裝后界面如下：

寄語：無限風光在險峰！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。