微信小程式:設定底部導航欄目
阿新 • • 發佈:2019-01-23
微信小程式底部想要有一個漂亮的導航欄目,不知道怎麼製作,於是百度找到了本篇文章,分享給大家。
好了 小程式的頭部標題 設定好了,我們來說說底部導航欄是如何實現的。
我們先來看個效果圖
這裡,我們添加了三個導航圖示,因為我們有三個頁面,微信小程式最多能加5個。
那他們是怎麼出現怎麼著色的呢?兩步就搞定!
1. 圖標準備
我們進入該網站,滑鼠滑到一個喜歡的圖示上面 點選下方的 下載按鈕
在彈出框中 選擇了 倆個不同顏色的 圖示 選擇64px大小即可,我選擇的是png 然後下載下來 起上別名
將上述起好名字的圖示 儲存到 小程式 專案目錄中 新建立的 images 資料夾中,準備工作就做好了
2. 更改配置檔案
我們找到專案根目錄中的配置檔案 app.json 加入如下配置資訊
- "tabBar": {
- "color": "#a9b7b7",
- "selectedColor": "#11cd6e",
- "borderStyle":"white",
- "list": [{
- "selectedIconPath": "images/111.png",
- "iconPath": "images/11.png",
- "pagePath": "pages/index/index",
-
"text": "首頁"
- }, {
- "selectedIconPath": "images/221.png",
- "iconPath": "images/22.png",
- "pagePath": "pages/logs/logs",
- "text": "日誌"
- }, {
- "selectedIconPath": "images/331.png",
- "iconPath": "images/33.png",
- "pagePath": "pages/test/test",
- "text": "開心測試"
-
}]
- },
解釋一下 對應的屬性資訊
tabBar 指底部的 導航配置屬性
color 未選擇時 底部導航文字的顏色
selectedColor 選擇時 底部導航文字的顏色
borderStyle 底部導航邊框的樣色(注意 這裡如果沒有寫入樣式 會導致 導航框上邊框會出現預設的淺灰色線條)
list 導航配置陣列
selectedIconPath 選中時 圖示路徑
iconPath 未選擇時 圖示路徑
pagePath 頁面訪問地址
text 導航圖示下方文字
如果要改變更詳細的樣式 請參看