EpicSoul/components/CustomTabBar.vue

<template>
  <view class="custom-tab-bar">
    <view
      class="tab-item"
      v-for="(item, i) in tabBarList"
      :key="i"
      v-if="tabBarShowList[i]"
      @click="switchTab(i)"
    >
      <text :style="{ color: currentTab === i ? item.selectColor : '#fff' }">{{
        item.text
      }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentTab: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabBarList: [
        {
          pagePath: "pages/index/index",
          selectColor: "#00FF00",
          text: "首页",
        },
        {
          pagePath: "pages/index/readingBody",
          selectColor: "#00FF00",
          text: "阅读体",
        },
        // {
        //   pagePath: "pages/index/sensoryStore",
        //   selectColor: "#00FF00",
        //   text: "有感商店",
        // },
        {
          pagePath: "pages/index/timeShopBank",
          selectColor: "#00FF00",
          text: "时间银行",
        },
        {
          pagePath: "pages/index/intelligentAgent",
          selectColor: "#00FFFF",
          text: "智能体",
        },
        {
          pagePath: "pages/index/iSoul",
          selectColor: "#00FF00",
          text: "iSoul",
        },
      ],
      tabBarShowList: [],
    };
  },
  onLoad() {
    this.getCurrentTab();
  },
  mounted() {
    this.tabBarShowList = uni
      .getStorageSync("SHFlag")
      .split(",")
      .map((item) => {
        return item.trim().toLowerCase() === "true";
      });
  },
  methods: {
    getCurrentTab() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const currentPath = currentPage.route;
      this.tabBarList.forEach((item, index) => {
        if (item.pagePath === currentPath) {
          this.currentTab = index;
        }
      });
    },
    switchTab(index) {
      if (this.currentTab === index) return;
      uni.switchTab({
        url: "/" + this.tabBarList[index].pagePath,
      });
    },
  },
};
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 123rpx;
  z-index: 30;
  background: #989898;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 100%;
}

.tab-item text {
  font-size: 31rpx;
}
</style>