uniapp自定义tabbar

Uniapp 自定义 TabBar 可以通过以下步骤实现：

1. 在 `App.vue` 中定义 `tabBar` 的布局，例如：

<template>
  <div>
    <router-view></router-view>
    <div class="uni-tabbar">
      <div class="uni-tabbar-item" @click="switchTab('/pages/index/index')">
        <i class="uni-icons uni-icon-home"></i>
        <div class="uni-tabbar-text">首页</div>
      </div>
      <div class="uni-tabbar-item" @click="switchTab('/pages/cart/cart')">
        <i class="uni-icons uni-icon-cart"></i>
        <div class="uni-tabbar-text">购物车</div>
      </div>
      <div class="uni-tabbar-item" @click="switchTab('/pages/user/user')">
        <i class="uni-icons uni-icon-person"></i>
        <div class="uni-tabbar-text">我的</div>
      </div>
    </div>
  </div>
</template>

2. 在 `App.vue` 中定义 `switchTab` 方法来切换页面：

methods: {
  switchTab(path) {
    if (this.$route.path !== path) {
      uni.switchTab({
        url: path
      })
    }
  }
}

3. 在 `pages.json` 中设置隐藏原生 TabBar：

{
  "globalStyle": {
    "navigationStyle": "custom"
  },
  "tabBar": {
    "custom": true,
    "list": []
  }
}

4. 在每个页面的 `onShow` 方法中设置 `tabBar` 的选中状态：

onShow() {
  if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
    this.$mp.page.getTabBar().setData({
      selected: 0 // 选中的 TabBar 索引
    })
  }
}

以上就是 Uniapp 自定义 TabBar 的实现步骤，你可以根据自己的需求进行修改和扩展。