当前位置：首页 > VUE

vue实现index list

2026-01-18 07:23:07VUE

实现 Index List 的基本思路

在 Vue 中实现 Index List（索引列表）通常需要结合字母索引和列表渲染功能。常见的场景是通讯录、城市选择等需要快速定位的场景。

基础实现步骤

安装依赖（如需要滚动组件）

npm install better-scroll --save

模板结构

<template>
  <div class="index-list">
    <div class="list-wrapper" ref="listWrapper">
      <ul>
        <li v-for="group in data" :key="group.title" class="list-group">
          <h2 class="list-group-title">{{group.title}}</h2>
          <ul>
            <li v-for="item in group.items" :key="item" class="list-group-item">
              {{item}}
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="index-nav">
      <ul>
        <li v-for="(group, index) in data" 
            :key="index"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd">
          {{group.title}}
        </li>
      </ul>
    </div>
  </div>
</template>

组件脚本

<script>
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      data: [
        {
          title: 'A',
          items: ['Alice', 'Alan', 'Adams']
        },
        {
          title: 'B',
          items: ['Bob', 'Barbara']
        }
        // 更多数据...
      ],
      touchStatus: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.listWrapper, {
        probeType: 3
      })
    })
  },
  methods: {
    handleTouchStart() {
      this.touchStatus = true
    },
    handleTouchMove(e) {
      if(!this.touchStatus) return

      const indexNav = document.querySelector('.index-nav')
      const navItems = indexNav.querySelectorAll('li')
      const itemHeight = navItems[0].clientHeight
      const touchY = e.touches[0].clientY
      const index = Math.floor((touchY - indexNav.offsetTop) / itemHeight)

      if(index >= 0 && index < navItems.length) {
        this.scroll.scrollToElement(
          document.querySelectorAll('.list-group-title')[index],
          0
        )
      }
    },
    handleTouchEnd() {
      this.touchStatus = false
    }
  }
}
</script>

样式处理

<style scoped>
.index-list {
  position: relative;
  height: 100%;
}

.list-wrapper {
  height: 100%;
  overflow: hidden;
}

.list-group-title {
  padding: 10px 15px;
  background: #f5f5f5;
}

.list-group-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.index-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.1);
  padding: 10px 5px;
  border-radius: 10px;
}

.index-nav li {
  padding: 3px;
  text-align: center;
  color: #333;
}
</style>

优化方案

添加右侧索引提示 可以在触摸右侧索引时添加一个中央提示框，显示当前选中的字母。

性能优化 对于大数据量，可以考虑虚拟滚动技术，只渲染可视区域内的元素。

响应式处理 添加对窗口大小变化的响应，确保在不同设备上都能正常显示。

替代方案

如果不想使用 better-scroll，可以使用原生滚动：

vue实现index list

methods: {
  scrollTo(index) {
    const groupTitle = document.querySelectorAll('.list-group-title')[index]
    groupTitle.scrollIntoView({behavior: 'smooth'})
  }
}