retail-app/components/cate-tab/cate-tab.vue

<template>
  <view class="cate-tab">
    <view
      class="cate-tab-wrapper flex aic"
      :style="[{ position: noFixed ? 'static' : 'fixed' }]"
    >
      <view
        class="tab-item"
        :class="'tab-item-' + index"
        :style="itemStyle"
        v-for="(item, index) in tabs"
        :key="index"
        @click="tabHandle(item, index)"
      >
        <view
          class="tab-name ellipsis"
          :style="curCOM === index ? selectStyle : textStyle"
          >{{ item.name }}</view
        >
        <view class="tab-line" v-if="curCOM === index"></view>
        <!-- <view v-if="item.num && item.num > 0" :style="{width: item.num < 100? '34rpx': 'auto', padding:item.num < 100? '0': '0 10rpx', borderRadius: item.num < 100 ? '50%' : '20rpx'}" class="count">{{item.num < 99 ? item.num : '99+'}}</view> -->
      </view>
    </view>
    <view class="placeholder" v-if="!noFixed"></view>
  </view>
</template>

<script>
import { toRpx } from "@/utils/calculate.js";
export default {
  props: {
    noFixed: Boolean, // 不需要定位
    cur: {
      // 当前选中tab
      type: Number,
      default: 0,
    },
    itemStyle: {
      type: Object,
    },
    selectStyle: {
      type: Object,
      default: () => {
        return {
          fontSize: "40rpx",
          fontWeight: "bold",
          color: "#152129",
        };
      },
    },
    textStyle: {
      // 字体大小
      type: Object,
      default: () => {
        return {
          fontSize: "32rpx",
          color: "#707476",
        };
      },
    },
    tabs: Array, // 对应tab数据，name--tab文案，value--对应值,建议统一用value num--数标
    top: {
      // 距离顶部位置，不包括导航
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      lineLeft: 0, // 底部线条左定位值
      lineWidth: 0, // 底部线条宽度
    };
  },
  computed: {
    curCOM: {
      get() {
        return this.cur;
      },
      set(val) {
        this.$emit("update:cur", val);
      },
    },
  },
  methods: {
    async tabHandle(item, index) {
      if (this.curCOM === index) {
        return;
      }
      this.$emit("tabHandle", item, index);
      this.curCOM = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.cate-tab {
  .cate-tab-wrapper {
    position: fixed;
    left: 0;
    padding: 0 40rpx;
    height: 100rpx;
    width: 100%;
    z-index: 99;
    line-height: 100rpx;
    background-color: #fff;
    // border-bottom: 1rpx solid $bg-color-main;
    // justify-content: space-around;

    .tab-line {
      position: absolute;
      bottom: 30rpx;
      left: 0;
      width: 100%;
      background-color: $color-main;
      border-radius: 4rpx;
      height: 12rpx;
      z-index: -1;
      transition: all ease-out 0.3s;
    }
    .tab-item {
      position: relative;
      font-size: 32rpx;
    }
    .count {
      position: absolute;
      right: -20rpx;
      top: 14rpx;
      border: 1rpx solid #fff;
      z-index: 20;
      background-color: $color-orange;
      color: #fff;
      font-size: 20rpx;
      height: 34rpx;
      display: flex;
      justify-content: center;
      align-content: center;
      text-align: center;
    }
  }
  .placeholder {
    height: 101rpx;
  }
}
</style>