點擊下面網址進入系列教程
10天零基礎入門小程序系列教程
上一節帶領大家實現了網絡數據的獲取並填充到首頁列表，但是我們的小程序肯定不能僅僅只有首頁一個頁面，我們這節就來學習使用tabbar實現底部導航欄，進而實現個人中心頁。同樣我們這節的代碼是基於第三天代碼開發的。如果沒有看過前3天視頻的同學，點擊上面鏈接去看前3天視頻。
本節知識點
- 1，認識tabbar
- 2，實現底部導航欄
先看下本節實現的效果圖
tabbar導航欄.gif
接下來開始講解實現步驟
一，創建個人中心頁
大家還記得怎麼創建新頁面吧。
- 1，在pages裏創建me文件夾
- 2，在新創建的me文件夾裏創建me.wxml,me.js,me.wxss文件
-
3，在app.json裏註冊個人中心頁面。
下面貼出來圖解
![]()
1-創建me.png
註冊頁面.png
二，學習tabbar，並用tabbar實現底部導航欄
老規矩，我們學習新組件，一定要先看官方文檔，官方文檔永遠是最好的老師
官方文檔
可以看到，我們要想用tabbar實現底部導航欄，就至少要有兩個頁面，這也是一開始我們創建me（個人中心頁面的原因）
我們的tabbar使用官方也有給出簡單示例
官方示例
我們就把官方示例代碼複製到我們的app.json(tabbar也是在app.json裏註冊使用的)
image.png
這樣我們就把tabbar註冊到app.json裏了。
這樣我們就實現了下面效果
