uniapp微信小程序vue3自定义tabbar

在App.vue隐藏原生tabbar，也可以在pages.json中配置

二选一就好了

创建 CustomTabBar 公共组件

<template>
  <view class="custom-tab-bar" :style="{paddingBottom: safeAreaHeight + 'px'}">
    <view class="tab-bar-item" :class="{'active' : props.currentPage === index}" v-for="(item, index) in tabBarList" :key="index">
      <image v-if="props.currentPage === index" :src="'../' + item.selectedIconPath" @click.stop="switchTab(item)"></image>
      <image v-else :src="'../' + item.iconPath" @click.stop="switchTab(item)"></image>
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  currentPage: Number,
})

const tabBarList = ref([
  {
    pagePath: "pages/tabbar/msg",
    iconPath: "static/tabbar/dynamic.png",
    selectedIconPath: "static/tabbar/dynamic1.png",
    text: "动态"
  },
  {
    pagePath: "pages/tabbar/static",
    iconPath: "static/tabbar/statistic.png",
    selectedIconPath: "static/tabbar/statistic1.png",
    text: "统计"
  },
  {
    pagePath: "pages/tabbar/work",
    iconPath: "static/tabbar/work.png",
    selectedIconPath: "static/tabbar/work1.png",
    text: "工作台"
  },
  {
    pagePath: "pages/tabbar/find",
    iconPath: "static/tabbar/find.png",
    selectedIconPath: "static/tabbar/find1.png",
    text: "发现"
  },
  {
    pagePath: "pages/tabbar/user",
    iconPath: "static/tabbar/my.png",
    selectedIconPath: "static/tabbar/my1.png",
    text: "我的"
  }
]);


// 切换 tab 的方法
const switchTab = (item) => {
  uni.switchTab({
    url: '/' + item.pagePath,
  })
};

let safeAreaHeight = ref(0);

onMounted(() => {
  // 获取底部安全区域高度
  uni.getSystemInfo({
    success: (res) => {
      let sHeight = res.screenHeight; // 获取屏幕高度
      let sTop = res.safeArea.bottom; // 获取安全区域底部高度
      safeAreaHeight.value = sHeight - sTop; // 计算安全区域距离底部的高度
      console.log('底部安全区域高度：', safeAreaHeight.value);
    }
  });

  uni.hideTabBar();
});
</script>

<style lang="scss" scoped>
.custom-tab-bar {
  position: fixed;
  z-index: 99;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  padding: 5px 0;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #93A2B7;
  &.active {
    color: #24C597;
  }

  &:nth-child(3) image {
    margin-top: -18px;
    width: 80rpx;
    height: 80rpx;
  }
}

.tab-bar-item image {
  width: 24px;
  height: 24px;
}

.tab-bar-item text {
  font-size: 12px;
  margin-top: 6rpx;
}
</style>

在每个tabbar页面中引入组件