YingXingAI/components/TabBar.vue

<template>
  <u-tabbar
    :value="currentIndex"
    :show="true"
    :bg-color="'#fff'"
    :border-top="false"
    :fixed="true"
    :height="148"
    :list="formattedTabList"
    @change="switchTab"
  >
  </u-tabbar>
</template>

<script>
export default {
  name: "TabBar",
  props: {
    currentPath: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      currentIndex: 0,
      tabList: [
        {
          text: "会话列表",
          iconText: "📋",
          useImg: true,
          icon: "/static/tabbar/tabbar-icon1.png",
          activeIcon: "/static/tabbar/tabbar-icon1-active.png",
          pagePath: "/pages/home/conversations/index",
        },
        {
          text: "留言板",
          iconText: "📊",
          useImg: true,
          icon: "/static/tabbar/tabbar-icon2.png",
          activeIcon: "/static/tabbar/tabbar-icon2-active.png",
          pagePath: "/pages/notes/index",
        },
        {
          text: "我的",
          iconText: "👤",
          useImg: true,
          icon: "/static/tabbar/tabbar-icon3.png",
          activeIcon: "/static/tabbar/tabbar-icon3-active.png",
          pagePath: "/pages/my/index",
        },
      ],
    };
  },
  computed: {
    // 格式化tabList为uview的u-tabbar所需格式
    formattedTabList() {
      return this.tabList.map((item) => {
        return {
          text: item.text,
          iconPath: item.icon,
          selectedIconPath: item.activeIcon,
          pagePath: item.pagePath,
        };
      });
    },
  },
  created() {
    // 根据当前路径设置激活的tab
    this.setActiveTab();
  },
  methods: {
    setActiveTab() {
      const currentPath = this.currentPath || this.getCurrentPath();
      this.tabList.forEach((item, index) => {
        if (currentPath.includes(item.pagePath)) {
          this.currentIndex = index;
        }
      });
    },
    getCurrentPath() {
      // 获取当前页面路径
      const pages = getCurrentPages();
      if (pages.length > 0) {
        const currentPage = pages[pages.length - 1];
        return "/" + currentPage.route;
      }
      return "";
    },
    switchTab(index) {
      if (this.currentIndex === index) return;

      this.currentIndex = index;
      this.$emit("change", this.tabList[index].pagePath, index);

      // 跳转到对应页面
      uni.switchTab({
        url: this.tabList[index].pagePath,
      });
    },
  },
};
</script>

<style scoped>
/* /deep/.u-icon__img {
  width: 54rpx !important;
  height: 54rpx !important;
} */
</style>