滚动效果Vue2 实现通讯录联系人选择页面：支持字母导航和实时搜索 从零开始用 Vue2 开发通讯录页面，含分组展示与字母跳转功能

### 基于 Vue2 的通讯录页面实现方案 要实现一个带有滚动效果、字母导航栏、实时搜索框、联系人分组及点击选择功能的通讯录页面，可以通过以下方式完成： #### 页面布局设计 页面主要分为三部分：顶部的搜索框、左侧的联系人列表区域以及右侧的字母导航栏。 - **搜索框**：允许用户输入关键字并过滤联系人列表。 - **联系人列表**：按照首字母分组展示联系人，并支持滚动定位到指定字母位置。 - **字母导航栏**：提供快速跳转至对应字母的功能，在触摸或点击时显示放大提示字母[^1]。 --- #### 数据准备 定义一组模拟数据 `contacts`，其中每个对象包含姓名 (`name`) 和所属分组字母 (`group`)。例如： ```javascript const contacts = [ { name: 'Alice', group: 'A' }, { name: 'Bob', group: 'B' }, { name: 'Charlie', group: 'C' } ]; ``` 为了方便操作，还需要计算每组的偏移量以便实现滚动定位功能。 --- #### 组件开发 ##### 1. 搜索框组件 (SearchBar.vue) 该组件负责接收用户的输入，并触发父级更新筛选后的联系人列表。 ```vue <template> <input type="text" v-model="searchText" placeholder="请输入名字..." @input="$emit('update-search', searchText)" /> </template> <script> export default { data() { return { searchText: '' }; } }; </script> ``` ##### 2. 联系人列表组件 (ContactList.vue) 此组件渲染经过筛选和分组处理的联系人列表，并监听滚动事件来动态调整高亮状态。 ```vue <template> <div class="contact-list"> <ul ref="listContainer"> <li v-for="(group, index) in filteredGroups" :key="index" :id="'section-' + group.group"> {{ group.group }} <span v-for="item in group.items" :key="item.name">{{ item.name }}</span> </li> </ul> </div> </template> <script> export default { props: ['filteredContacts'], computed: { filteredGroups() { const groups = {}; this.filteredContacts.forEach(item => { if (!groups[item.group]) { groups[item.group] = []; } groups[item.group].push(item); }); return Object.keys(groups).sort().map(key => ({ group: key, items: groups[key] })); } }, mounted() { window.addEventListener('scroll', () => { // 更新当前可见的字母索引逻辑... }); } }; </script> ``` ##### 3. 字母导航栏组件 (LetterNav.vue) 当用户点击某个字母时，自动滚动到对应的联系人分组位置。 ```vue <template> <div class="letter-nav"> <div v-for="(letter, index) in letters" :key="index" @touchstart.prevent="onTouchStart(letter)" @click="onClick(letter)"> {{ letter }} </div> </div> </template> <script> export default { data() { return { letters: Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)) }; }, methods: { onTouchStart(letter) { this.scrollToSection(letter); }, onClick(letter) { this.scrollToSection(letter); }, scrollToSection(letter) { const sectionId = '#section-' + letter; document.querySelector(sectionId)?.scrollIntoView({ behavior: 'smooth' }); } } }; </script> ``` --- #### 主应用集成 (App.vue) 将上述三个子组件组合在一起形成完整的通讯录界面。 ```vue <template> <div id="app"> <SearchBar @update-search="handleSearchUpdate" /> <ContactList :filteredContacts="filteredContacts" /> <LetterNav /> </div> </template> <script> import SearchBar from './components/SearchBar.vue'; import ContactList from './components/ContactList.vue'; import LetterNav from './components/LetterNav.vue'; export default { components: { SearchBar, ContactList, LetterNav }, data() { return { allContacts: [...], // 初始化全部联系人数据 searchKeyword: '', }; }, computed: { filteredContacts() { if (!this.searchKeyword.trim()) return this.allContacts; const keywordLower = this.searchKeyword.toLowerCase(); return this.allContacts.filter(contact => contact.name.toLowerCase().includes(keywordLower) ); } }, methods: { handleSearchUpdate(value) { this.searchKeyword = value; } } }; </script> ``` --- #### 样式优化 为提升用户体验，需对各模块样式进行美化，尤其是字母导航栏悬浮层的设计[^2]。 ---