基于Vue3+UniApp在单个页面实现固定TabBar的多种方式

<template>
  <view class="container">


    <!-- 固定底部的 tabBar -->
    <view class="fixed-tabbar">
      <view class="tab-item" :class="{ active: currentTab === 0 }" @click="currentTab = 0">
        <text>测试A</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
        <text>测试B</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的 tab
    };
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: auto; /* 让内容可以滚动 */
  padding-bottom: 60px; /* 避免被底部 tabBar 遮挡 */
}

.fixed-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #666;
}

.tab-item.active {
  color: #007AFF;
  font-weight: bold;
}
</style>

<template>
  <view>
    <!-- 顶部 Tab 切换 -->
    <uni-segmented-control
      :current="currentTab"
      :values="['测试A', '测试B']"
      @clickItem="switchTab"
    />

    <!-- 提柜记录 -->
    <view v-if="currentTab === 0">
      <uni-card title="测试A">
        <text>这里是测试A...</text>
      </uni-card>
    </view>

    <!-- 残损单记录 -->
    <view v-else>
      <uni-card title="测试B">
        <text>这里是测试B...</text>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0 // 默认选中第一个
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<template>
  <view>
    <!-- 自定义顶部 Tab -->
    <uni-nav-bar >
      <template v-slot:left>
        <view @click="switchTab(0)" :class="{ active: currentTab === 0 }">测试A</view>
      </template>
      <template v-slot:right>
        <view @click="switchTab(1)" :class="{ active: currentTab === 1 }">测试B</view>
      </template>
    </uni-nav-bar>

    <!-- 页面内容 -->
    <view v-if="currentTab === 0">
      <uni-card title="测试A">
        <text>这里是测试A...</text>
      </uni-card>
    </view>

    <view v-else>
      <uni-card title="测试B">
        <text>这里是测试B...</text>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style scoped>
.active {
  font-weight: bold;
  color: #007AFF;
}
</style>