当前位置：首页 > VUE

vue实现index list

2026-02-18 23:44:19VUE

实现 Index List 的基本思路

在 Vue 中实现 Index List（索引列表）通常需要结合字母或数字索引，并支持快速跳转到对应分组。常见场景如联系人列表、城市选择等。

vue实现index list

安装依赖

使用 better-scroll 或 vue-better-scroll 库可以简化滚动逻辑。安装命令：

vue实现index list

npm install better-scroll --save

组件结构设计

创建两个主要组件：

IndexList.vue：主组件，包含列表和右侧索引栏
IndexSection.vue：每个索引分组的子组件

核心代码实现

IndexList.vue

<template>
  <div class="index-list" ref="wrapper">
    <div class="content">
      <index-section 
        v-for="(group, index) in data" 
        :key="index"
        :title="group.title"
        :items="group.items"
      />
    </div>
    <div class="index-bar">
      <ul>
        <li 
          v-for="(item, index) in indexList" 
          :key="index"
          @touchstart="handleTouchStart"
          @touchmove.prevent="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import IndexSection from './IndexSection'
import BScroll from 'better-scroll'

export default {
  components: { IndexSection },
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      scroll: null,
      touch: {
        y1: 0,
        y2: 0
      }
    }
  },
  computed: {
    indexList() {
      return this.data.map(group => group.title)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: 3
      })
    })
  },
  methods: {
    handleTouchStart(e) {
      const index = e.target.innerText
      this.touch.y1 = e.touches[0].pageY
      this.scrollTo(index)
    },
    handleTouchMove(e) {
      this.touch.y2 = e.touches[0].pageY
      const delta = (this.touch.y2 - this.touch.y1) / 20 | 0
      const index = this.indexList.indexOf(e.target.innerText)
      const targetIndex = index + delta
      if (targetIndex >= 0 && targetIndex < this.indexList.length) {
        this.scrollTo(this.indexList[targetIndex])
      }
    },
    handleTouchEnd() {
      // 触摸结束处理
    },
    scrollTo(index) {
      const target = document.querySelector(`[data-index="${index}"]`)
      if (target) {
        this.scroll.scrollToElement(target, 300)
      }
    }
  }
}
</script>

IndexSection.vue

<template>
  <div class="index-section" :data-index="title">
    <div class="index-title">{{ title }}</div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

样式设计

/* IndexList.vue 样式 */
.index-list {
  position: relative;
  height: 100%;
  overflow: hidden;
}

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

.index-bar li {
  padding: 3px;
  text-align: center;
  color: #333;
}

/* IndexSection.vue 样式 */
.index-section {
  padding: 0 10px;
}

.index-title {
  padding: 5px 0;
  font-weight: bold;
  background: #f5f5f5;
}

.index-section ul li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

使用示例

<template>
  <index-list :data="listData" />
</template>

<script>
import IndexList from './components/IndexList'

export default {
  components: { IndexList },
  data() {
    return {
      listData: [
        {
          title: 'A',
          items: ['Apple', 'Amazon']
        },
        {
          title: 'B',
          items: ['Banana', 'Baidu']
        },
        // 更多数据...
      ]
    }
  }
}
</script>