【笔记】微信小程序通过app.json设置底部导航

德顺

发布于 2019-11-13 17:27:59

8290

发布于 2019-11-13 17:27:59

文章被收录于专栏：前端资源

首先，您可以在阿里图标库选择合适的图标，使用方法参见我之前写的文章：阿里巴巴矢量图标库 iconfont 的使用方法

我选了几个图标，选中不选中颜色有个区分：

底部菜单最少设置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

效果如图：