uniapp 手写tabbar

在 UniApp 中手写 TabBar 可以使用自定义组件的方式实现。以下是一个简单的示例：

1. 首先，在你的项目中创建一个自定义组件，例如 `CustomTabBar.vue`。

2. 在 `CustomTabBar.vue` 中定义你自己的 TabBar 样式和结构，可以使用 `uni-icons` 或其他图标库来显示 Tab 图标。

<template>
  <view class="custom-tab-bar">
    <view class="tab-item" @click="switchTab(0)">
      <uni-icons name="home" class="tab-icon"></uni-icons>
      <text>首页</text>
    </view>
    <view class="tab-item" @click="switchTab(1)">
      <uni-icons name="discover" class="tab-icon"></uni-icons>
      <text>发现</text>
    </view>
    <view class="tab-item" @click="switchTab(2)">
      <uni-icons name="message" class="tab-icon"></uni-icons>
      <text>消息</text>
    </view>
    <view class="tab-item" @click="switchTab(3)">
      <uni-icons name="personal" class="tab-icon"></uni-icons>
      <text>个人</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    switchTab(index) {
      uni.switchTab({
        url: this.$pages[index]
      });
    }
  }
};
</script>

<style scoped>
.custom-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #ccc;
}

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

.tab-icon {
  font-size: 24px;
  margin-bottom: 4px;
}
</style>

3. 在页面的 `main.js` 或 `App.vue` 中引入自定义组件，并在页面底部使用它。

<template>
  <view class="container">
    <view class="content">
      <!-- 页面内容 -->
    </view>
    <custom-tab-bar></custom-tab-bar>
  </view>
</template>

<script>
import CustomTabBar from "@/components/CustomTabBar.vue";

export default {
  components: {
    CustomTabBar
  }
};
</script>

<style>
.container {
  position: fixed;
  height: 100%;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.content {
  height: calc(100% - 50px);
}
</style>

这样，你就手写了一个简单的 TabBar 在你的 UniApp 项目中。你可以根据自己的需求修改样式和图标。