【筆記】微信小程式通過app.json設置底部導航

  • 2019 年 11 月 13 日
  • 筆記

首先，您可以在阿里圖標庫選擇合適的圖標，使用方法

我選了幾個圖標，選中不選中顏色有個區分：

底部菜單最少設置2個最多可以設置5個。

找到項目根目錄的配置文件 app.json 加入如下配置資訊：

"tabBar": {      "color": "#a9b7b7",      "selectedColor": "#E50012",      "borderStyle": "white",      "list": [        {          "selectedIconPath": "images/index_h.png",          "iconPath": "images/index.png",          "pagePath": "pages/index/index",          "text": "首頁"        },        {          "selectedIconPath": "images/tel_h.png",          "iconPath": "images/tel.png",          "pagePath": "pages/index/index",          "text": "聯繫我們"        },        {          "selectedIconPath": "images/my_h.png",          "iconPath": "images/my.png",          "pagePath": "pages/index/index",          "text": "我的"        }      ]    }

tabBar 是底部菜單

color 字體顏色

borderStyle tabbar上邊框的顏色， 僅支援 black/white

list 列表

selectedIconPath 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此參數無效

iconPath 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數無效，不支援網路圖片

pagePath 頁面路徑，必須在 pages 中先定義

text tab上按鈕文字

參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

效果如圖：

Tags:

VirMach 便宜 VPS