vue实现索引列表

实现索引列表的基本思路

在Vue中实现索引列表通常需要结合滚动监听、字母索引栏以及数据分组。核心是通过计算属性对数据进行按字母分组，利用滚动事件高亮当前索引，并通过点击索引快速定位到对应分组。

数据准备与分组

将原始数据按首字母分组，通常使用计算属性处理。假设原始数据为list：

computed: {
  groupedList() {
    const groups = {};
    this.list.forEach(item => {
      const firstChar = item.name.charAt(0).toUpperCase();
      if (!groups[firstChar]) {
        groups[firstChar] = [];
      }
      groups[firstChar].push(item);
    });
    return Object.keys(groups).sort().map(key => ({
      letter: key,
      items: groups[key]
    }));
  }
}

模板结构

模板分为左侧列表区和右侧索引栏：

<div class="list-container">
  <div class="list-content" ref="listContent">
    <div v-for="group in groupedList" :key="group.letter" :id="`group-${group.letter}`">
      <h3>{{ group.letter }}</h3>
      <div v-for="item in group.items" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>

  <div class="index-bar">
    <div 
      v-for="letter in groupedList.map(g => g.letter)" 
      :key="letter"
      @click="scrollTo(letter)"
    >
      {{ letter }}
    </div>
  </div>
</div>

滚动定位实现

通过scrollTo方法实现点击索引跳转：

methods: {
  scrollTo(letter) {
    const el = document.getElementById(`group-${letter}`);
    if (el) {
      this.$refs.listContent.scrollTo({
        top: el.offsetTop,
        behavior: 'smooth'
      });
    }
  }
}

滚动高亮当前索引

监听列表容器的滚动事件，计算当前可见的分组并高亮对应索引：

mounted() {
  this.$refs.listContent.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  this.$refs.listContent.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const scrollTop = this.$refs.listContent.scrollTop;
    const groups = this.$refs.listContent.querySelectorAll('[id^="group-"]');

    groups.forEach(group => {
      const groupTop = group.offsetTop;
      const groupHeight = group.offsetHeight;
      if (scrollTop >= groupTop - 10 && scrollTop < groupTop + groupHeight - 10) {
        this.activeLetter = group.id.replace('group-', '');
      }
    });
  }
}

样式优化

添加基础样式确保布局合理：

.list-container {
  display: flex;
  height: 100vh;
}

.list-content {
  flex: 1;
  overflow-y: auto;
}

.index-bar {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
}

.index-bar div {
  padding: 2px 0;
  font-size: 12px;
  cursor: pointer;
}

.index-bar div.active {
  color: #42b983;
  font-weight: bold;
}

性能优化建议

对于大数据量的列表，建议：

• 使用虚拟滚动技术（如vue-virtual-scroller）
• 防抖处理滚动事件
• 考虑使用Intersection Observer API替代滚动事件监听

完整组件示例

将上述代码整合为单文件组件：

<template>
  <div class="list-container">
    <div class="list-content" ref="listContent">
      <div 
        v-for="group in groupedList" 
        :key="group.letter" 
        :id="`group-${group.letter}`"
      >
        <h3>{{ group.letter }}</h3>
        <div v-for="item in group.items" :key="item.id">
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="index-bar">
      <div 
        v-for="letter in groupedList.map(g => g.letter)" 
        :key="letter"
        @click="scrollTo(letter)"
        :class="{ active: activeLetter === letter }"
      >
        {{ letter }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
      activeLetter: ''
    };
  },
  computed: {
    groupedList() {
      const groups = {};
      this.list.forEach(item => {
        const firstChar = item.name.charAt(0).toUpperCase();
        if (!groups[firstChar]) {
          groups[firstChar] = [];
        }
        groups[firstChar].push(item);
      });
      return Object.keys(groups).sort().map(key => ({
        letter: key,
        items: groups[key]
      }));
    }
  },
  methods: {
    scrollTo(letter) {
      const el = document.getElementById(`group-${letter}`);
      if (el) {
        this.$refs.listContent.scrollTo({
          top: el.offsetTop,
          behavior: 'smooth'
        });
      }
    },
    handleScroll() {
      const scrollTop = this.$refs.listContent.scrollTop;
      const groups = this.$refs.listContent.querySelectorAll('[id^="group-"]');

      groups.forEach(group => {
        const groupTop = group.offsetTop;
        const groupHeight = group.offsetHeight;
        if (scrollTop >= groupTop - 10 && scrollTop < groupTop + groupHeight - 10) {
          this.activeLetter = group.id.replace('group-', '');
        }
      });
    }
  },
  mounted() {
    this.$refs.listContent.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    this.$refs.listContent.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style scoped>
/* 样式部分同上 */
</style>