任務6 tabBar導航

任務描述

實現tabBar導航添加，完成導航菜單項的圖標設置。

1）通過編輯app.json內容，實現tabBar導航添加。

2）配置導航菜單項的頁面路徑。

3）配置導航菜單項的圖標。

操作步驟

1 打開utils/app.json文件，把“pages”項內的“"pages/index/index"”調整到第一行，實現首頁為pages/index/index的效果，如圖1-38所示。

2 在utils/app.json文件中，添加：

在pages/index/index頁面中生成了底部導航，如圖1-39所示。

3 在utils/app.json文件的tabBar的list中增加一項：

保存后，頁面的底部導航增加了一項“圖片瀏覽”，如圖1-40所示。

4 復制home1.png、home2.png、log1.png、log2.png、watch1.png、watch2.png等圖片文件到項目的images文件夾中，如圖1-41所示。

5 打開app.json文件，在“首頁”下添加兩行代碼：

其中，iconPath的作用是定義菜單項的圖標文件為images/home1.png；selectedIconPath的作用是當菜單項選中時，顯示的圖標為images/home2.png，如圖1-42所示。

6 打開app.json文件，在“日志”下添加兩行代碼：

在“圖片瀏覽”下添加兩行代碼：

為“日志”“圖片瀏覽”菜單項配置對應的圖標，如圖1-43所示。

7 單擊“日志”后，顯示pages/logs/logs頁面內容，如圖1-44所示。

8 單擊“圖片瀏覽”后，顯示pages/center/index頁面內容，如圖1-45所示。