vue实现索引列表

Vue 实现索引列表

使用第三方库（如 better-scroll 或 vue-index-list）

安装 better-scroll 或 vue-index-list 库，可以快速实现带索引的列表功能。以 better-scroll 为例：

npm install better-scroll --save

在 Vue 组件中引入并使用：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div v-for="(group, index) in data" :key="index" class="group">
        <div class="title">{{ group.title }}</div>
        <div v-for="(item, idx) in group.items" :key="idx" class="item">{{ item }}</div>
      </div>
    </div>
    <div class="index-list">
      <div v-for="(group, index) in data" :key="index" @click="scrollTo(index)">
        {{ group.title }}
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
  data() {
    return {
      data: [
        { title: 'A', items: ['Apple', 'Ant'] },
        { title: 'B', items: ['Banana', 'Bear'] },
        // 更多数据...
      ],
      scroll: null
    };
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 3
    });
  },
  methods: {
    scrollTo(index) {
      const group = this.$refs.wrapper.querySelectorAll('.group')[index];
      this.scroll.scrollToElement(group, 300);
    }
  }
};
</script>

<style>
.wrapper {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.index-list {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 5px;
  border-radius: 10px;
}
</style>

自定义实现索引列表

如果需要手动实现索引列表，可以通过监听滚动事件和计算当前滚动位置来实现：

<template>
  <div class="list-container" @scroll="handleScroll">
    <div v-for="(group, index) in data" :key="index" class="group" :ref="`group-${index}`">
      <div class="title">{{ group.title }}</div>
      <div v-for="(item, idx) in group.items" :key="idx" class="item">{{ item }}</div>
    </div>
    <div class="index-indicator" v-if="currentIndex !== null">
      {{ data[currentIndex].title }}
    </div>
    <div class="index-list">
      <div v-for="(group, index) in data" :key="index" @click="scrollTo(index)">
        {{ group.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { title: 'A', items: ['Apple', 'Ant'] },
        { title: 'B', items: ['Banana', 'Bear'] },
        // 更多数据...
      ],
      currentIndex: null
    };
  },
  methods: {
    handleScroll(e) {
      const scrollTop = e.target.scrollTop;
      this.data.forEach((group, index) => {
        const groupEl = this.$refs[`group-${index}`][0];
        const groupTop = groupEl.offsetTop;
        const groupHeight = groupEl.offsetHeight;
        if (scrollTop >= groupTop && scrollTop < groupTop + groupHeight) {
          this.currentIndex = index;
        }
      });
    },
    scrollTo(index) {
      const groupEl = this.$refs[`group-${index}`][0];
      this.$el.scrollTo({
        top: groupEl.offsetTop,
        behavior: 'smooth'
      });
    }
  }
};
</script>

<style>
.list-container {
  height: 100vh;
  overflow-y: auto;
  position: relative;
}
.index-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 100;
}
.index-list {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 5px;
  border-radius: 10px;
}
</style>

使用 Vue 插件（如 vue-virtual-scroll-list）

对于大数据量的索引列表，可以使用虚拟滚动优化性能：

npm install vue-virtual-scroll-list --save

示例代码：

<template>
  <virtual-list
    :size="50"
    :remain="10"
    :data-key="'title'"
    :data-sources="data"
    @scroll="handleScroll"
  >
    <template v-slot="{ source }">
      <div class="group">
        <div class="title">{{ source.title }}</div>
        <div v-for="(item, idx) in source.items" :key="idx" class="item">{{ item }}</div>
      </div>
    </template>
  </virtual-list>
  <div class="index-list">
    <div v-for="(group, index) in data" :key="index" @click="scrollTo(index)">
      {{ group.title }}
    </div>
  </div>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list';

export default {
  components: { VirtualList },
  data() {
    return {
      data: [
        { title: 'A', items: ['Apple', 'Ant'] },
        { title: 'B', items: ['Banana', 'Bear'] },
        // 更多数据...
      ]
    };
  },
  methods: {
    scrollTo(index) {
      // 需要根据插件 API 实现滚动到指定位置
    }
  }
};
</script>

以上方法可以根据需求选择适合的方式实现索引列表。