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

news2024/12/23 16:11:31
<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>

效果图
在这里插入图片描述
支持滑动和点击

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1620136.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么因素可以影响到代理IP稳定性?爬虫代理IP有哪些作用?

一、什么因素可以影响到代理IP稳定性 代理IP的稳定性受到多种因素的影响&#xff0c;以下是一些主要的因素&#xff1a; 代理IP的质量&#xff1a;不同的代理IP提供商提供的代理IP质量参差不齐&#xff0c;一些低质量的代理IP可能经常出现连接问题或速度慢的情况&#xff0c;…

Day:动态规划 LeedCode 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

123. 买卖股票的最佳时机 III 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#xff1a;你不能同时参与多笔交易&#xff08;你必须在再次购买前出售掉之前的股票&a…

解码数据世界:统计学入门与应用指南

引言 统计学可以被定义为研究数据的科学&#xff0c;它涉及到数据的收集、分析、解释和呈现。其目标是从数据中提取有意义的信息&#xff0c;并使用这些信息来做出推断与决策。 统计学主要分别以下几个主要领域&#xff1a; 描述性统计&#xff1a;使用图表、图形和其他工具…

C++之入门

文章目录 1、前言2、C的关键字2.1C语言32关键字2.2C关键字(63个) 3、命名空间4、输入输出(cout、cin)4、缺省参数5、函数重载6 引用6.1 引用的定义6.2 引用的特性6.3引用的使用场景6.4 实际例子6.5、总结 7、内联函数8、auto关键字9、nullptr关键字 1、前言 C语言是结构化和模…

【声呐仿真】学习记录0-服务器配置docker、ros环境

【声呐仿真】学习记录0-服务器配置docker、ros环境 前言一、~~0.设置mobaXterm~~1.拉取镜像2.服务器开启xhost&#xff0c;可视化&#xff08;rviz、gazebo&#xff09;3.创建容器&#xff0c;挂载数据卷4.测试宿主机与容器数据是否同步5.测试5.0测试xclock5.1测试ros小乌龟5.2…

算术表达式计算程序:Python语言实现

算术表达式计算程序&#xff1a;Python语言实现 本文介绍通过Python语言实现算术表达式计算程序的过程。 我们将按照软件工程的基本步骤来介绍&#xff1a; 需求分析设计实现 程序的需求 我们的程序具有如下功能&#xff1a; 用户在提示符下输入一个算术表达式&#xff0…

碰到今日伦敦银价格走势图不懂得分析怎么办?

踏入2024年&#xff0c;伦敦银出现了比往年更多的投资机会&#xff0c;尤其是近期伦敦银价格连续上涨突破多个整数关口&#xff0c;现在已经站在28上方。碰到这么强的走势&#xff0c;投资者自然很想快点入场交易。但是交易前投资者需要分析今日伦敦银价格走势图之后再入场&…

ffmpeg支持MP3编码的方法

目录 现象 解决办法 如果有编译包没有链接上的情况 现象 解决办法 在ffmpeg安装包目录下 &#xff0c;通过./configure --list-encoders 和 ./configure --list-decoders 命令可以看到&#xff0c;ffmpeg只支持mp3解码&#xff0c;但是不支持mp3编码。 上网查寻后发现&…

idm序列号永久激活码2023免费可用 IDM软件破解版下载 最新版Internet Download Manager 网络下载加速必备神器 IDM设置中文

IDM是一款多线程下载工具&#xff0c;全称Internet Download Manager。IDM的多线程加速功能&#xff0c;能够充分利用宽带&#xff0c;所以下载速度会比较快&#xff0c;而且它支持断点续传。它的网站音视频捕获、站点抓取、静默下载等功能&#xff0c;也特别实用。 idm使用技…

SS34B-ASEMI超低Low VF肖特基SS34B

编辑&#xff1a;ll SS34B-ASEMI超低Low VF肖特基SS34B 型号&#xff1a;SS34B 品牌&#xff1a;ASEMI 封装&#xff1a;SMB 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;3A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;40V 最大正向电压…

hyperf 三十一 极简DB组件

一 安装及配置 composer require hyperf/db php bin/hyperf.php vendor:publish hyperf/db 默认配置 config/autoload/db.php 如下&#xff0c;数据库支持多库配置&#xff0c;默认为 default。 配置项类型默认值备注driverstring无数据库引擎 支持 pdo 和 mysqlhoststringl…

线程安全以及解决方案

文章目录 1.线程安全的原因①抢占式执行②多线程修改同一个变量③修改的操作不是原子的④内存可见性⑤指令重排序 2. 线程安全的解决方案3 synchronized的特性------可重入锁 1.线程安全的原因 ①抢占式执行 操作系统对线程的调度是随机的&#xff0c;没有规律&#xff08;主…

什么便签好用又没广告 好用无广便签分享

身处这个快节奏的时代&#xff0c;我们时常被各种琐事和计划所包围。想象一下&#xff0c;你在办公桌前&#xff0c;电脑屏幕上杂乱无章地贴着各种纸质便签&#xff0c;有的记录着待办事项&#xff0c;有的则是灵感闪现时的几句诗句。每次想要查找某个信息&#xff0c;都得费力…

Golang | Leetcode Golang题解之第42题接雨水

题目&#xff1a; 题解: func trap(height []int) (ans int) {n : len(height)if n 0 {return}leftMax : make([]int, n)leftMax[0] height[0]for i : 1; i < n; i {leftMax[i] max(leftMax[i-1], height[i])}rightMax : make([]int, n)rightMax[n-1] height[n-1]for i…

CANoe-Vector Security Manager介绍

Vector Security Manager 是 Vector 公司提供的一种工具,它为像 CANoe 这样的 Vector 工具提供安全功能,例如安全相关的通信(SecOC)、诊断、认证等,这些功能都是在安全配置文件中进行管理的。所有支持的工具都采用统一的配置方式。 一个安全配置文件为工具提供了以下安全…

探索AI时代的新天地:LLAMA3引领人工智能革命

大家好&#xff01;相信大家对于AI&#xff08;人工智能&#xff09;的发展已经有了一定的了解&#xff0c;但你是否意识到&#xff0c;到了2024年&#xff0c;AI已经变得如此强大和普及&#xff0c;带来了我们从未想象过的便利和创新呢&#xff1f;让我们一起来看看AI在这个时…

如何安全高效地进行网点文件下发?

随着IT技术的飞速发展&#xff0c;以银行为代表的企业数字化技术转型带来了大量的电子化文档传输需求。文件传输数量呈几何级数增长&#xff0c;传统集中式文件传输模式在爆炸式的增长需求下&#xff0c;银行网点文件下发的效率、可靠性、安全性等方面&#xff0c;都需要重点关…

边缘计算的优势

边缘计算的优势 边缘计算是一种在数据生成地点附近处理数据的技术&#xff0c;而非传统的将数据发送到远端数据中心或云进行处理。这种计算模式对于需要快速响应的场景特别有效&#xff0c;以下详述了边缘计算的核心优势。 1. 降低延迟 边缘计算通过在数据源近处处理数据&…

2款摄像头录像软件,满足你的多种要求!

“有没有一款能够录制摄像头视频的软件呀&#xff1f;我计划录制一些生活小窍门和教学视频&#xff0c;想要能清楚地拍到自己的操作过程。但找了好多软件&#xff0c;都不太满意&#xff0c;真心希望大家能给我推荐几款好用的摄像头录像软件&#xff0c;最好能简单易上手的&…

GPU功能介绍简介

GPU功能介绍简介 随着计算需求的不断升级&#xff0c;尤其是在图形密集型和并行计算任务中&#xff0c;GPU已经从一个简单的图像渲染器件演变成一个强大的计算工具。本篇文章将深入探讨GPU的核心功能、架构以及其在多个领域中的应用。 一、GPU的起源与演进 GPU最初设计用于加速…