微信小程序框架分析小練手（一）——貓眼電影底部標籤導航製做

舊版貓眼電影底部有4個標籤導航：電影、影院、發現、個人，以下圖所示：

1、首先，打開微信開發者工具，新建一個項目：movie。以下圖：

 

2、創建以下的一些目錄：

 

 3、將底部標籤導航圖標的素材放到images的bar中（0表示標籤未被選中，1表示選中），如圖：

 

4、打開app.json配置文件，在pages數組中添加4個頁面的路徑——電影"pages/movie/movie"、影院"pages/cinema/cinema"、發現"pages/find/find"、個人"pages/me/me"，保存後會自動生成相應的頁面文件夾；刪除"pages/index/index" "pages/logs/logs"頁面路徑以及對應的文件夾。

5、在window數組裏配置窗口導航背景顏色爲紅色（#D53E37），導航欄文字爲電影，字體顏色設置爲白色（white），以下圖：

 

 

6、在tabBar對象裏配置底部標籤導航背景色爲灰色（#f5f5f5），文字默認爲白色（white），文字選中時爲紅色（#D53E37），在list數組中配置底部標籤導航對應的頁面、導航名稱、默認時圖標和選中時圖標。以下圖：

 

 至此，就完成了貓眼電影底部導航的配置，效果圖以下，當點擊不一樣的導航標籤，能夠切換不一樣的頁面，同時導航圖標和導航文字會呈現爲選中狀態。