w3h5

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

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

我选了几个图标,选中不选中颜色有个区分:

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

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

效果如图:

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

赞 (0)
分享到: +More |

评论 沙发

换个身份