uniapp自定义tabbar怎么做

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

1. 在pages.json中配置tabBar，设置custom为true。

"tabBar": {
  "custom": true,
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/static/tabbar/home.png",
      "selectedIconPath": "/static/tabbar/home_active.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "/static/tabbar/mine.png",
      "selectedIconPath": "/static/tabbar/mine_active.png"
    }
  ]
}

2. 在App.vue中引入自定义TabBar组件。

<template>
  <div>
    <router-view/>
    <custom-tab-bar :tabList="tabList" :active="activeIndex" @tabBarClick="tabBarClick"/>
  </div>
</template>

<script>
import customTabBar from '@/components/custom-tab-bar.vue'

export default {
  components: {
    customTabBar
  },
  data() {
    return {
      tabList: [
        {
          icon: 'icon-home',
          text: '首页',
          path: '/pages/home/home'
        },
        {
          icon: 'icon-mine',
          text: '我的',
          path: '/pages/mine/mine'
        }
      ],
      activeIndex: 0
    }
  },
  methods: {
    tabBarClick(index) {
      this.activeIndex = index
      uni.switchTab({
        url: this.tabList[index].path
      })
    }
  }
}
</script>

3. 在自定义TabBar组件中通过v-for循环渲染tabBar。

<template>
  <div class="custom-tab-bar">
    <div v-for="(item, index) in tabList" :key="index" class="tab-item" @click="tabBarClick(index)">
      <i :class="item.icon" :style="{color: active === index ? activeColor : normalColor}"></i>
      <span :style="{color: active === index ? activeColor : normalColor}">{{item.text}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    active: {
      type: Number,
      default: 0
    },
    normalColor: {
      type: String,
      default: '#bfbfbf'
    },
    activeColor: {
      type: String,
      default: '#007aff'
    }
  },
  methods: {
    tabBarClick(index) {
      this.$emit('tabBarClick', index)
    }
  }
}
</script>

<style>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 5px 10px;
  border-top: 1px solid #eee;
}

.custom-tab-bar .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-tab-bar .tab-item i {
  font-size: 20px;
}

.custom-tab-bar .tab-item span {
  font-size: 12px;
}
</style>

通过以上步骤，就可以实现自定义TabBar了。其中，通过在App.vue中引入自定义TabBar组件，并在自定义TabBar组件中通过v-for循环渲染tabBar。在自定义TabBar组件中通过props接收外部传递的参数，如tabList、active等，并通过$emit方法将tabBar的点击事件传递给父组件。