mrr.sj.front/components/MyTabBar.vue

<template>
  <!-- 固定在底部，适配安全区 -->
  <view class="custom-tabbar" :style="{ paddingBottom: safeBottom + 'px' }">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      @click="handleSwitch(index)"
    >
      <!-- 图标 -->
      <image
        :src="currentIndex === index ? item.selectedIcon : item.icon"
        class="tab-icon"
      />
      <!-- 文字 -->
      <text class="tab-text" :class="{ active: currentIndex === index }">{{
        item.text
      }}</text>
      <!-- 徽标/小红点 -->
      <view
        v-if="item.badge"
        class="tab-badge"
        :style="{ backgroundColor: item.badgeColor || '#ff4d4f' }"
      >
        {{ item.badge === true ? "" : item.badge }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // Tab 配置：[{ text, icon, selectedIcon, path, badge }]
    tabList: { type: Array, required: true },
    // 当前激活索引
    currentIndex: { type: Number, default: 0 },
  },
  data() {
    return {
      safeBottom: 0, // iOS 底部安全距离
    };
  },
  created() {
    // 计算安全距离
    uni.getSystemInfo({
      success: (res) => {
        this.safeBottom = res.safeAreaInsets.bottom;
      },
    });
  },
  methods: {
    handleSwitch(index) {
      if (index === this.currentIndex) {
        return;
      }
      // 跳转 Tab 页面（必须用 switchTab）
      // uni.redirectTo({ url: this.tabList[index].path , animationType: 'none' });
      // 通知父组件更新激活态（或通过 Vuex 管理）
      this.$emit("change", index);
    },
  },
};
</script>
  
<style lang="less" scoped>
.custom-tabbar {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  padding: 0 120rpx;
  align-items: center;
  background: #fff;
  // border-top: 1px solid #eee;
  box-shadow: 0px -8rpx 24rpx 0px rgba(81,118,171,0.2);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}
.tab-icon {
  width: 48rpx;
  height: 48rpx;
}
.tab-text {
  font-size:24rpx;
  margin-top: 4rpx;
  color: #999;
}
.tab-text.active {
  color: #FF4767; /* 选中颜色 */
}
.tab-badge {
  position: absolute;
  top: 16rpx;
  right: 20rpx;
  padding: 4rpx 12rpx;
  font-size: 20rpx;
  color: #fff;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}
</style>