fanghuayuexuan/components/public/scs-scroll-iconbar.vue

<!--
 * @Author: jmy
 * @Date: 2026-01-06 15:02:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-06 15:02:01
 * @Description: 滚动图标栏
-->
<template>
  <scroll-view class="scs-scroll-iconbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
    <view v-for="(item, index) in tabsData" :key="index" class="nav-item"
      :style="{ 'margin-right': calcGap * 2 + 'rpx' }" :class="{ 'act-current': index === tabCurrentIndex, }"
      @tap="tabChange(index)" :id="'item-' + index">
      <view class="item-title">
        {{ item[nameKey] }}
      </view>
      <uni-transition type="fade" :duration="300" :show="index === tabCurrentIndex">
        <image src="/static/images/home/tj_tab_hover_icon20@2x.png"></image>
      </uni-transition>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'scs-scroll-iconbar',
  props: {
    // 导航项数据
    tabsData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 当前选中的导航项索引
    tabCurrentIndex: {
      type: Number,
      default: 0,
    },
    // 导航项名称键名
    nameKey: {
      type: String,
      default: 'name',
    },
    // 导航项间距rpx
    calcGap: {
      type: Number,
      default: 60,
    },
    // 是否开启滚动
    isScroll: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      scrollLeft: 0,
      widthList: [],
      screenWidth: 0,
    };
  },

  watch: {
    tabCurrentIndex: function (val) {
      if (this.isScroll) {
        this.tabScroll(val);
      }
    },
    tabsData: function (val) {
      this.init();
    },
  },
  methods: {
    // 导航栏点击
    tabChange(index) {
      let self = this;
      self.$emit('tabChange', index);
    },
    // 导航栏滚动
    tabScroll(index) {
      var widthArr = this.widthList;
      var scrollWidth = 0;
      for (var i = 0; i < index + 1; i++) {
        scrollWidth += widthArr[i];
      }
      let currentWidth = widthArr[index];
      // scrollView 居中算法
      // 减去固定宽度位移
      // 减去选中的bar的宽度的一半
      scrollWidth -= this.screenWidth / 2;
      scrollWidth -= currentWidth / 2;
      this.scrollLeft = scrollWidth;
    },

    // 计算导航项宽度
    calculateItemWidth() {
      let widthArr = [];
      Promise.all(
        this.tabsData.map((_, index) =>
          new Promise((resolve) => {
            uni
              .createSelectorQuery()
              .in(this)
              .select(`#item-${index}`)
              .boundingClientRect((data) => {
                if (data) {
                  // 在元素实际宽度基础上增加 this.calcGap 的左右 padding，保证滚动时两侧留白
                  widthArr.push(data.width + this.calcGap);
                } else {
                  // 兜底默认宽度
                  widthArr.push(100);
                }
                resolve();
              })
              .exec();
          })
        )
      ).then(() => {
        // 所有节点查询完毕，一次性赋值
        this.widthList = widthArr;
      });
    },
    // 计算窗口宽度
    calculateWindowWidth() {
      var info = uni.getSystemInfoSync();
      this.screenWidth = info.screenWidth;
    },
    init() {
      this.calculateWindowWidth();
      // 组件挂载后计算，确保DOM已渲染
      this.$nextTick(() => {
        this.calculateItemWidth();
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
::v-deep.uni-scroll-view::-webkit-scrollbar {
  display: none;
}

.scs-scroll-iconbar {
  width: 100%;
  height: 90rpx;
  white-space: nowrap;
  box-sizing: border-box;


  .nav-item {
    height: 100%;
    text-align: center;
    color: #333333;
    display: inline-block;
    position: relative;
    font-size: 32rpx;

    position: relative;
    font-weight: 400;

    image {
      width: 20px;
      height: 6px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: all 0.3s ease;
    }

    .item-title {
      line-height: 90rpx;
      display: inline-block;
      position: relative;
      z-index: 10;
    }
  }

  .act-current {
    color: #02B176;
    font-size: 36rpx;
    font-weight: 600;
  }


}
</style>