VUE2版本的仿微信通讯录侧滑列表

<template>
	<!-- Vue模板部分 -->
	<div>
		<div v-for="(group, index) in groupedArray" :key="index" ref="indexcatch">
			<h2>{{ letter[index] }}</h2>
			<ul>
				<li v-for="item in group" :key="item.id">
					{{ item.name }}
				</li>
			</ul>
		</div>
		<div ref="scrollDiv"
			style="position: fixed;right: 0;top: calc(50vh - 325px);width: 50px; height: 650px;background-color: #CCCCCC;"
			@click="handleClick" @mousedown="startLongPress" @mouseup="stopLongPress">
			<div v-for="(item,index) in letter" :key="index"
				:style="{textAlign: 'center',height: '25px',color:IndexItem==index?'red':'black',fontWeight:IndexItem==index?'700':''}">
				{{letter[index]}}
			</div>
		</div>
	</div>
</template>

<script>
	// yarn add js-pinyin --save 或者 npm install js-pinyin --save 安装
	// 作用是把汉字转化为拼音,以便于排序使用
	import Pinyin from 'js-pinyin'; 

	export default {
		data() {
			return {
				letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				], // 右侧字母列表
				arr: [], // 被处理过的左侧数据列表数据(已经分类好)
				EleHeight: 25, // 右侧每个字母的高(使用这个高度用于计算点击的或者滚动到的是哪个索引的字母,以便于让左侧列表跟着进行滚动到指定位置)
				FatherDivHeight: -1, // 右侧字母列表的容器距离浏览器顶部的距离
				IndexItem: -1, // 用于将字母高亮显示
			};
		},
		computed: {
			groupedArray() {
				let result = {};
				// 生成随机名字的函数(这个是找GPT要的方法,你也用不上,毕竟你的项目是有数据的,这里是模拟的数据,就不写注释了)
				function getRandomName() {
					const surnames = ['张', '王', '李', '赵', '刘', '陈', '杨', '黄', '吴', '郑', '孙', '周', '徐', '朱', '高', '林', '何',
						'马', '罗', '梁', '宋', '郭', '胡', '郭', '潘', '李', '谢', '邓', '曹', '程', '曾', '彭', '蔡', '梁', '田', '许',
						'韩', '冯', '曹', '庄', '魏', '张', '石', '章', '叶', '董', '汪', '方', '于', '邹', '苏', '潘', '葛', '奚', '范',
						'彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '贾', '严', '武', '庄', '邱', '卫', '蒋', '童', '颜', '郭',
						'梅', '盛', '林', '翟', '石', '王'
					];
					const names = ['三', '四', '五', '六', '七', '八', '九', '十', '一', '二', '华', '明', '强', '超', '辉', '军', '涛',
						'勇', '毅', '伟', '刚', '强', '军', '平', '杰', '峰', '雷', '磊', '新', '洋', '宇', '昊', '翔', '晓', '亮', '云',
						'飞', '鹏', '浩', '波', '文', '轩', '东', '俊', '涵', '阳', '晨', '帆', '宇', '航', '建', '琪', '轩', '海', '立',
						'智', '志', '弘', '博', '晨', '瑞', '凯', '子', '卓', '坤', '雄', '霖', '政', '晗', '煜', '�'
					];
					let getRandomItem = (arr) => arr[Math.floor(Math.random() * arr.length)];
					let randomNames = [];
					for (let i = 0; i < 299; i++) {
						let surname = getRandomItem(surnames);
						let name = getRandomItem(names);
						randomNames.push({
							"name": surname + name
						});
					}
					return randomNames;
				}
				this.arr = getRandomName();
				this.arr.forEach(item => {
					let firstLetter = this.getFirstLetter(item.name);
					if (!result[firstLetter]) {
						result[firstLetter] = [];
					}
					result[firstLetter].push(item);
				});
				let allLetters = 'abcdefghijklmnopqrstuvwxyz'.split('');
				let groupedArray = allLetters.map(letter => result[letter] || []);
				return groupedArray;
			}
		},
		methods: {
			getFirstLetter(str) {
				// 将中文姓名转换为拼音并取首字母
				return Pinyin.getCamelChars(str).charAt(0).toLowerCase();
			},
			startLongPress(e) {
				// 鼠标按下(开始监听全局的鼠标滚动)
				this.FatherDivHeight = e.currentTarget.offsetTop // 获取当前字母容器距离顶部的距离
				// 添加全局事件监听器
				document.addEventListener('mousemove', this.handleScroll);
			},

			stopLongPress() {
				// 移除全局事件监听器(鼠标抬起移除全局的鼠标移动事件)
				document.removeEventListener('mousemove', this.handleScroll);
			},
			handleClick(event) {
				// 点击滚动实现
				// 获取当前滚动的y坐标
				// console.log(event.y);
				// 获取当前字母列表每个字母的高度
				// console.log(this.EleHeight);
				// 计算当前字母索引
				let index = Math.ceil((event.detail.y - this.FatherDivHeight) / this.EleHeight) - 1;
				console.log(index);
				// 将当前索引赋值
				this.IndexItem = index
				// 将右侧列表滚动到相应位置
				scrollTo({
					left: 0, // 距离左侧距离
					top: this.$refs.indexcatch[index].offsetTop, //点击侧边栏的哪个索引就让右侧哪个索引对应的块滚动
					behavior: "smooth", // 点击滚动这里我用了平滑滚动,带动画的
				})
			},

			handleScroll(event) {
				// 获取当前滚动的y坐标
				// console.log(event.y);
				// 获取当前字母列表每个字母的高度
				// console.log(this.EleHeight);
				// 计算当前字母索引
				let index = Math.ceil((event.y - this.FatherDivHeight) / this.EleHeight) - 1;
				console.log(index);
				// 将当前字母索引赋值
				this.IndexItem = index
				// 将右侧列表滚动到相应位置
				scrollTo({
					left: 0,
					top: this.$refs.indexcatch[index].offsetTop, //点击侧边栏的哪个索引就让右侧哪个索引对应的块滚动
					behavior: "auto", // auto 瞬间滚动 无动画 smooth 平滑滚动带有动画效果
				})
			}
		}
	};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

效果图

支持滑动和点击