baiyuApp/components/me-tabs/me-tabs.vue

<template>
  <view class="me-tabs" :class="{'tabs-fixed': fixed}" :style="{height: tabHeightVal}">
    <scroll-view 
      v-if="tabs.length" 
      :id="viewId" 
      :scroll-left="scrollLeft" 
      scroll-x 
      scroll-with-animation 
      :scroll-animation-duration="300"
      :show-scrollbar="false"
      @scroll="onScroll"
    >
      <view class="tabs-container">
        <!-- tab项 -->
        <view 
          class="tab-item" 
          v-for="(tab, i) in tabs" 
          :id="'tabitem'+i" 
          :ref="'tabitem'+i" 
          :class="{'active': value===i}" 
          :style="{ 
            height: tabHeightVal, 
            'line-height': tabHeightVal,
            'color': value===i ? actColor : norColor,
            'margin-right': i < tabs.length - 1 ? spacingVal : '0'
          }" 
          :key="i" 
          @click="tabClick(i)"
        >
          <text class="tab-text">{{getTabName(tab)}}</text>
        </view>
        
        <!-- 下划线 -->
        <view 
          class="tabs-line" 
          :style="{
            left: lineLeft,
            width: lineWidth,
            'background-color': actColor
          }"
        ></view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default() {
        return []
      }
    },
    nameKey: {
      type: String,
      default: 'dictLabel'
    },
    value: {
      type: [String, Number],
      default: 0
    },
    fixed: Boolean,
    height: {
      type: Number,
      default: 64
    },
    norColor: {
      type: String,
      default: '#333333'
    },
    actColor: {
      type: String,
      default: '#2583EB'
    },
    lineWidth: {
      type: String,
      default: '50rpx'
    },
    spacing: { // 间距控制
      type: Number,
      default: 2 // 默认30rpx间距(15px)
    },
    minWidth: { // 最小宽度
      type: Number,
      default: 80 // 默认80rpx
    }
  },
  data() {
    return {
      viewId: 'id_' + Math.random().toString(36).substr(2, 16),
      scrollLeft: 0,
      tabListSize: [],
      lineLeft: '0px',
      warpWidth: null,
      scrollTimer: null,
      tabsItemRect: null,
      isScrolling: false,
      lastScrollLeft: 0
    }
  },
  computed: {
    tabHeightPx() {
      return uni.upx2px(this.height);
    },
    tabHeightVal() {
      return this.tabHeightPx + 'px';
    },
    minWidthVal() {
      return uni.upx2px(this.minWidth) + 'px';
    },
    spacingVal() {
      return uni.upx2px(this.spacing) + 'px';
    }
  },
  watch: {
    tabs: {
      handler() {
        this.warpWidth = null;
        this.$nextTick(() => {
          this.updateTabs();
        });
      },
      immediate: true
    },
    value: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal && !this.isScrolling) {
          this.$nextTick(() => {
            this.updateTabs();
          });
        }
      },
      immediate: true
    },
    spacing() {
      this.$nextTick(() => {
        this.updateTabs();
      });
    }
  },
  methods: {
    getTabName(tab) {
      return typeof tab === "object" ? tab[this.nameKey] : tab;
    },
    tabClick(i) {
      if (this.value !== i) {
        this.$emit("input", i);
        this.$emit("change", i);
      }
    },
    async updateTabs() {
      await this.selectorQuery();
      this.scrollCenter();
      this.updateLineLeft();
    },
    async scrollCenter() {
      if (!this.warpWidth) {
        let rect = await this.initWarpRect();
        this.warpWidth = rect ? rect.width : uni.getSystemInfoSync().windowWidth;
      }
      
      const currentTab = this.tabListSize[this.value];
      if (!currentTab || !this.tabsItemRect) return;
      
      // 计算当前tab在容器中的位置
      const tabLeft = currentTab.left - this.tabsItemRect.left;
      const tabCenter = tabLeft + currentTab.width / 2;
      
      // 计算需要滚动的距离
      const scrollLeft = tabCenter - this.warpWidth / 2;
      
      // 限制滚动范围
      const maxScrollLeft = this.tabsItemRect.width - this.warpWidth;
      this.scrollLeft = Math.max(0, Math.min(maxScrollLeft, scrollLeft));
      
      // 头条小程序兼容处理
      // #ifdef MP-TOUTIAO
      this.scrollTimer && clearTimeout(this.scrollTimer);
      this.scrollTimer = setTimeout(() => {
        this.scrollLeft = Math.ceil(this.scrollLeft);
      }, 400);
      // #endif
    },
    initWarpRect() {
      return new Promise(resolve => {
        setTimeout(() => {
          let query = uni.createSelectorQuery();
          // #ifndef MP-ALIPAY
          query = query.in(this);
          // #endif
          query.select('#' + this.viewId).boundingClientRect(data => {
            resolve(data);
          }).exec();
        }, 20);
      });
    },
    selectorQuery() {
      return new Promise(resolve => {
        if (this.tabs.length === 0) {
          resolve();
          return;
        }
        
        // 获取tabs容器尺寸
        uni.createSelectorQuery()
          .in(this)
          .select('.tabs-container')
          .boundingClientRect(rect => {
            this.tabsItemRect = rect;
          })
          .exec();
          
        // 获取所有tab项尺寸
        uni.createSelectorQuery()
          .in(this)
          .selectAll('.tab-item')
          .boundingClientRect(rects => {
            this.tabListSize = rects;
            resolve();
          })
          .exec();
      });
    },
    updateLineLeft() {
      if (this.tabs.length === 0 || !this.tabsItemRect) return;
      
      if (this.tabListSize.length > 0) {
        const currentSize = this.tabListSize[this.value];
        if (currentSize) {
          // 计算下划线位置：tab中心点 - 下划线宽度的一半
          const lineWidthPx = uni.upx2px(parseInt(this.lineWidth));
          
          // 计算相对于容器的位置
          const tabCenter = currentSize.left - this.tabsItemRect.left + currentSize.width / 2;
          this.lineLeft = `${tabCenter - lineWidthPx / 2}px`;
        }
      }
    },
    onScroll(e) {
      this.isScrolling = true;
      this.lastScrollLeft = e.detail.scrollLeft;
      
      // 滚动结束后重置状态
      clearTimeout(this.scrollEndTimer);
      this.scrollEndTimer = setTimeout(() => {
        this.isScrolling = false;
      }, 300);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.updateTabs();
    });
  }
}
</script>

<style lang="scss">
.me-tabs{
  position: relative;
  font-size: 28rpx;
  background-color: #fff;
  border-bottom: 0rpx solid #eee;
  box-sizing: border-box;
  overflow-y: hidden;
  background-color: #fff;
  
  &.tabs-fixed{
    z-index: 990;
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
  }
  
  scroll-view {
    width: 100%;
    white-space: nowrap;
    
    .tabs-container {
      position: relative;
      display: inline-flex;
      padding: 0 20rpx;
      box-sizing: border-box;
    }
  }

  .tab-item{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    color:#333;
    font-size: 32rpx;
    transition: color 0.3s;
    flex-shrink: 0;
    min-width: v-bind(minWidthVal); /* 设置最小宽度 */
    
    .tab-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      padding: 0 20rpx; /* 左右内边距 */
    }
    
    &.active{
      font-weight: bold;
      color: #2583EB;
    }
  }
  
  // 选中tab的线
  .tabs-line{
    z-index: 1;
    position: absolute;
    bottom: 10rpx;
    height: 6rpx;
    border-radius: 4rpx;
    transition: left 0.3s ease-in-out;
  }
}
</style>