微信小程序添加底部自定义导航栏（tabBar）

Posted 2021-03-08 Bill

tabBar参数说明参考： 官网文档

具体配置：

1、在app.json中添加你的自定义导航栏信息（名字，点击前图片，点击后图片，要跳转的界面等等）

注意事项：tabBar最多五个

 

参考示例：

"tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#937bf5",
    "list": [
      {
        "iconPath": "images/tabbar/index.png",
        "selectedIconPath": "images/tabbar/index_active.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "images/tabbar/near.png",
        "selectedIconPath": "images/tabbar/near_active.png",
        "pagePath": "pages/near/near",
        "text": "附近"
      },
      {
        "iconPath": "images/tabbar/message.png",
        "selectedIconPath": "images/tabbar/message_active.png",
        "pagePath": "pages/message/message",
        "text": "消息"
      },
      {
        "iconPath": "images/tabbar/user.png",
        "selectedIconPath": "images/tabbar/user_active.png",
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }

View Code