微信小程序自定义顶部tabbar

微信小程序提供了自定义顶部 tabbar 的功能，你可以在 app.json 文件中的 "tabBar" 字段中进行配置。以下是一个示例：

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "images/tabbar/category.png",
        "selectedIconPath": "images/tabbar/category_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "images/tabbar/cart.png",
        "selectedIconPath": "images/tabbar/cart_active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "个人中心",
        "iconPath": "images/tabbar/profile.png",
        "selectedIconPath": "images/tabbar/profile_active.png"
      }
    ]
  }
}

在上面的示例中，你可以通过修改相应的字段来自定义顶部 tabbar。具体解释如下：

- `color`：未选中的 tab 文字颜色
- `selectedColor`：选中的 tab 文字颜色
- `backgroundColor`：tab 背景色
- `borderStyle`：tab 边框线颜色，可选值为 "black"、"white"
- `list`：tab 列表，每个对象代表一个 tab，包括以下字段：
- `pagePath`：页面路径
- `text`：tab 文字
- `iconPath`：未选中的 tab 图标路径
- `selectedIconPath`：选中的 tab 图标路径

你可以根据自己的需求修改以上字段来实现自定义顶部 tabbar。注意，图标路径需要放在对应的目录下，并且需要在页面中使用相对路径引用。