vue实现城市列表

Vue 实现城市列表

数据结构设计

使用数组存储城市数据，每个城市对象包含 id、name 等字段：

const cities = [
  { id: 1, name: '北京' },
  { id: 2, name: '上海' },
  { id: 3, name: '广州' }
];

基础列表渲染

通过 v-for 指令循环渲染城市列表：

<template>
  <ul>
    <li v-for="city in cities" :key="city.id">
      {{ city.name }}
    </li>
  </ul>
</template>

按字母分组

对城市数据进行分组处理，使用计算属性实现：

computed: {
  groupedCities() {
    return this.cities.reduce((groups, city) => {
      const firstLetter = city.name.charAt(0).toUpperCase();
      if (!groups[firstLetter]) {
        groups[firstLetter] = [];
      }
      groups[firstLetter].push(city);
      return groups;
    }, {});
  }
}

带索引的列表渲染

结合字母分组和索引栏实现：

<div class="city-list">
  <div v-for="(letter, index) in Object.keys(groupedCities)" :key="index">
    <h3>{{ letter }}</h3>
    <ul>
      <li v-for="city in groupedCities[letter]" :key="city.id">
        {{ city.name }}
      </li>
    </ul>
  </div>
</div>

添加索引导航

在右侧添加字母索引导航栏：

<div class="index-bar">
  <div 
    v-for="letter in Object.keys(groupedCities)" 
    :key="letter"
    @click="scrollToLetter(letter)"
  >
    {{ letter }}
  </div>
</div>

滚动定位功能

实现点击索引字母滚动到对应位置：

methods: {
  scrollToLetter(letter) {
    const element = document.querySelector(`[data-letter="${letter}"]`);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
}

样式优化

添加基础样式提升用户体验：

.city-list {
  height: 500px;
  overflow-y: auto;
}
.index-bar {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

性能优化

对于大数据量场景，建议使用虚拟滚动技术：

import { RecycleScroller } from 'vue-virtual-scroller';
components: {
  RecycleScroller
}

完整组件示例

整合所有功能的完整组件代码：

<template>
  <div class="city-container">
    <RecycleScroller
      class="scroller"
      :items="flattenCities"
      :item-size="50"
      key-field="id"
    >
      <template v-slot="{ item }">
        <div v-if="item.isLetter" class="letter-header">
          {{ item.letter }}
        </div>
        <div v-else class="city-item">
          {{ item.name }}
        </div>
      </template>
    </RecycleScroller>

    <div class="index-bar">
      <div 
        v-for="letter in letters" 
        :key="letter"
        @click="scrollToLetter(letter)"
      >
        {{ letter }}
      </div>
    </div>
  </div>
</template>