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

原创

用户6493868

发布于 2022-03-07 21:07:24

7590

发布于 2022-03-07 21:07:24

文章被收录于专栏：vue封装H5

效果图

实现步骤

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

"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"
      }
    ]
  }
}