UniAPP如何自定义tabBar

UniApp中可以通过修改`pages.json`中的`tabBar`字段来实现自定义`tabBar`。

首先在`pages.json`中定义自定义的`tabBar`，例如：

{
  "tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#bfbfbf",
    "selectedColor": "#2d8cf0",
    "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "iconPath": "static/tabbar/category.png",
        "selectedIconPath": "static/tabbar/category-active.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart-active.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png",
        "text": "我的"
      }
    ]
  }
}

以上代码定义了一个包含四个`tab`的`tabBar`，每个`tab`包含一个`pagePath`字段，指定了该`tab`对应的页面路径，一个`iconPath`字段，指定了该`tab`未选中时的图标路径，一个`selectedIconPath`字段，指定了该`tab`选中时的图标路径，以及一个`text`字段，指定了该`tab`的文本。

然后在需要使用该`tabBar`的页面中，可以通过`uni.setTabBarStyle()`和`uni.setTabBarItem()`方法来动态修改`tabBar`的样式和内容。例如：

export default {
  onShow() {
    uni.setTabBarStyle({
      backgroundColor: '#ffffff',
      color: '#bfbfbf',
      selectedColor: '#2d8cf0'
    })
    uni.setTabBarItem({
      index: 1,
      text: '分类',
      iconPath: '/static/tabbar/category.png',
      selectedIconPath: '/static/tabbar/category-active.png'
    })
  }
}

以上代码在页面显示时动态修改了`tabBar`的样式和第二个`tab`的内容。

需要注意的是，如果使用了自定义`tabBar`，则需要手动处理页面之间的跳转。具体来说，可以通过`uni.switchTab()`方法来跳转到其他`tab`对应的页面。例如：

uni.switchTab({
  url: '/pages/cart/cart'
})