Vue数字无限轮播active类异常：多元素被错误标记为激活

核心问题分析 #

你通过复制数组实现无限滚动时，原数组元素会在复制后的数组中重复出现。如果activeIndex直接对应复制后数组的索引，或者判断active时没有对原始数组长度取模，就会导致多个相同内容的元素同时被标记为active。比如原始数组长度为10，数字8在索引7，复制后的数组里索引17也是8，当activeIndex为7时，两个位置的元素都会匹配上。

修复步骤 #

1. 修正active类的判断逻辑 #

不要直接用循环的索引和activeIndex对比，而是基于原始数组的索引取模判断：

<template>
  <ul class="carousel">
    <!-- 循环复制后的extendedCards数组 -->
    <li 
      v-for="(item, index) in extendedCards" 
      :key="index"
      :class="{ active: getIsActive(index) }"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      cards: [1,2,3,4,5,6,7,8,9,10],
      activeIndex: 7, // 对应原始数组的数字8
      extendedCards: []
    }
  },
  created() {
    // 复制3份数组实现无限滚动效果
    this.extendedCards = [...this.cards, ...this.cards, ...this.cards]
  },
  methods: {
    getIsActive(index) {
      // 计算当前元素对应的原始数组索引
      const originalIndex = index % this.cards.length
      // 仅匹配原始数组对应索引的元素
      return originalIndex === this.activeIndex
    },
    // 上切换按钮逻辑
    handlePrev() {
      this.activeIndex = (this.activeIndex - 1 + this.cards.length) % this.cards.length
      // 滚动到复制数组的中间区域对应位置，避免边界问题
      this.scrollToTarget(this.activeIndex + this.cards.length)
    },
    // 下切换按钮逻辑
    handleNext() {
      this.activeIndex = (this.activeIndex + 1) % this.cards.length
      this.scrollToTarget(this.activeIndex + this.cards.length)
    },
    scrollToTarget(targetIndex) {
      const targetEl = this.$el.querySelectorAll('li')[targetIndex]
      if (targetEl) {
        targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }
    }
  }
}
</script>

2. 锁定activeIndex的有效范围 #

切换按钮的逻辑里，通过取模操作让activeIndex始终保持在原始数组的索引范围内（0到cards.length-1），避免索引越界导致的判断错误。

3. 滚动位置与activeIndex同步 #

如果通过滚动事件计算activeIndex，同样要对原始数组长度取模：

handleScroll() {
  // 你的滚动位置计算逻辑，得到当前可视中心元素的索引scrollIndex
  const scrollIndex = ...
  // 转换为原始数组的索引
  this.activeIndex = scrollIndex % this.cards.length
}

异常HTML的根源 #

你看到的多个active元素，本质是复制后的数组中相同内容的元素，在activeIndex判断时没有区分原始索引，导致所有相同位置的复制元素都被加上了active类。用上述取模的方式，就能确保只有原始数组对应索引的元素（复制数组的中间区域）被标记为active。

内容的提问来源于stack exchange，提问作者majar anar