小程序之实现自定义tabbar按钮

效果图

2022-03-07_210456.png

实现步骤

在app.json文件中配置tabBar属性

代码语言：javascript复制

"tabBar": {
    "color": "#DDDDDD",
    "selectedColor": "#E1B368",
    "backgroundColor": "#282828",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home-active.png"
      },
      {
        "pagePath": "pages/akers/akers",
        "text": "爱柯爱车",
        "iconPath": "./images/akers.png",
        "selectedIconPath": "./images/akers-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "./images/me.png",
        "selectedIconPath": "./images/me-active.png"
      }
    ]
  }
}

iconPath 即可配置自定义按钮的图标

selectedIconPath 自定义按钮选中之后的颜色

json app tabbar 配置

0 人点赞