Uniapp自定义tabbar

Uniapp 提供了一种自定义 tabbar 的方式，可以通过 `uni.setTabBar()` 方法来自定义 tabbar。具体步骤如下：

1. 在 `App.vue` 中的 `onLaunch` 方法中定义 tabbar 的结构和样式：

onLaunch: function() {
  //设置tabBar
  uni.setTabBarStyle({
    color: '#999999',
    selectedColor: '#007aff',
    backgroundColor: '#ffffff',
    borderStyle: 'black'
  });
  uni.setTabBarItem({
    index: 0,
    text: '首页',
    iconPath: '/static/tabbar/home.png',
    selectedIconPath: '/static/tabbar/home_selected.png'
  });
  uni.setTabBarItem({
    index: 1,
    text: '分类',
    iconPath: '/static/tabbar/category.png',
    selectedIconPath: '/static/tabbar/category_selected.png'
  });
  uni.setTabBarItem({
    index: 2,
    text: '购物车',
    iconPath: '/static/tabbar/cart.png',
    selectedIconPath: '/static/tabbar/cart_selected.png'
  });
  uni.setTabBarItem({
    index: 3,
    text: '我的',
    iconPath: '/static/tabbar/me.png',
    selectedIconPath: '/static/tabbar/me_selected.png'
  });
},

2. 在 `pages.json` 中配置 tabbar 的页面路径：

"tabBar": {
  "color": "#999999",
  "selectedColor": "#007aff",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/tabbar/home.png",
      "selectedIconPath": "/static/tabbar/home_selected.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "/static/tabbar/category.png",
      "selectedIconPath": "/static/tabbar/category_selected.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "/static/tabbar/cart.png",
      "selectedIconPath": "/static/tabbar/cart_selected.png"
    },
    {
      "pagePath": "pages/me/me",
      "text": "我的",
      "iconPath": "/static/tabbar/me.png",
      "selectedIconPath": "/static/tabbar/me_selected.png"
    }
  ]
}

以上就是自定义 tabbar 的基本步骤，你可以根据自己的需求来修改 tabbar 的样式和页面路径。