uniapp写微信小程序自定义tabbar

在使用UniApp框架开发微信小程序时，可以通过自定义组件来实现自定义TabBar。下面是一个简单的示例：

1. 在UniApp项目的`components`目录下创建一个名为`custom-tabbar`的文件夹，并在该文件夹下创建`index.vue`文件。

2. 在`index.vue`文件中编写自定义TabBar的代码，以下是一个示例：

<template>
  <view class="custom-tabbar">
    <view class="tabbar-item" :class="{ active: activeTab === 'home' }" @click="switchTab('home')">
      <text>首页</text>
    </view>
    <view class="tabbar-item" :class="{ active: activeTab === 'category' }" @click="switchTab('category')">
      <text>分类</text>
    </view>
    <view class="tabbar-item" :class="{ active: activeTab === 'mine' }" @click="switchTab('mine')">
      <text>我的</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'home' // 默认选中的Tab
    }
  },
  methods: {
    switchTab(tab) {
      // 切换Tab
      this.activeTab = tab;
      // 触发父组件的事件，实现页面切换
      this.$emit('switchTab', tab);
    }
  }
}
</script>

<style>
.custom-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  background-color: #f5f5f5;
}

.tabbar-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tabbar-item.active {
  color: #007aff;
}
</style>

3. 在需要使用自定义TabBar的页面中引入`custom-tabbar`组件，并使用`switchTab`事件进行页面切换，以下是一个示例：

<template>
  <view class="page">
    <custom-tabbar @switchTab="onSwitchTab"></custom-tabbar>
    <!-- 其他页面内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    onSwitchTab(tab) {
      // 切换页面
      uni.switchTab({
        url: `/pages/${tab}/index`
      });
    }
  }
}
</script>

<style>
.page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100px; /* 留出TabBar的高度 */
}
</style>

通过以上步骤，你就可以在UniApp中自定义微信小程序的TabBar了。记得根据自己的需求进行样式和页面切换逻辑的修改。希望对你有帮助！