基于uniapp与uview做一个按拼音首字母排序的通讯录页面

这篇具有很好参考价值的文章主要介绍了基于uniapp与uview做一个按拼音首字母排序的通讯录页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

基于uniapp与uview做一个按拼音首字母排序的通讯录页面,uniapp分享,uni-app

第一步导入pinyin库并应用,用于区分汉字的拼音首字母

npm i pinyin
import pinyin from "pinyin"

完整算法:

function getListByPinyinFirstLetter(data) {
		const newList = {};
		for (const item of data) {
			let firstLetter;
			if (/[a-zA-Z]/.test(item.name.charAt(0))) {
				// 如果是英文字母开头的直接使用大写首字母
				firstLetter = item.name.charAt(0).toUpperCase();
			} else {
				const pinyinArray = pinyin(item.name, {
					style: pinyin.STYLE_FIRST_LETTER, // 提取拼音首字母
				});
				if (pinyinArray.length > 0) {
					firstLetter = /[a-zA-Z]/.test(pinyinArray[0][0].toUpperCase()) ? pinyinArray[0][0].toUpperCase() :
						"#"; // 获取拼音首字母并转换为大写
				} else {
					// 如果没有拼音首字母,则归类为#
					firstLetter = "#";
				}
			}

			if (!newList[firstLetter]) {
				newList[firstLetter] = [];
			}
			newList[firstLetter].push(item);
		}
		// 将键按字母顺序排序
		const sortedKeys = Object.keys(newList).sort((a, b) => {
			if (a === '#') return 1;
			if (b === '#') return -1;
			return a.localeCompare(b);
		});

		const sortedNewList = {};
		for (const key of sortedKeys) {
			sortedNewList[key] = newList[key];
		}
		console.log(sortedNewList, sortedKeys);
		indexList.value = sortedKeys
		list.value = sortedNewList;
	}

完整代码(样式自己定义):文章来源地址https://www.toymoban.com/news/detail-738851.html

<template>
	{{newList}}
	<u-index-list :scrollTop="scrollTop" v-if="indexList.length">
		<view v-for="(item, index) in indexList" :key="index">
			<u-index-anchor :index="item" />
			<view class="list-cell" v-for="(item,index) in list[item]">
				{{item.name}}
			</view>
		</view>
	</u-index-list>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import pinyin from "pinyin"
	import {
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app"
	onLoad(() => {
		getListByPinyinFirstLetter(testList.value)
	})

	const indexList = ref([])
	const testList = ref([{
			name: "张三"
		},
		{
			name: "张学友"
		},
		{
			name: "asasd"
		},
		{
			name: "大师"
		},
		{
			name: "(字符"
		},
	])
	const list = ref([])

	function getListByPinyinFirstLetter(data) {
		const newList = {};
		for (const item of data) {
			let firstLetter;
			if (/[a-zA-Z]/.test(item.name.charAt(0))) {
				// 如果是英文字母开头的直接使用大写首字母
				firstLetter = item.name.charAt(0).toUpperCase();
			} else {
				const pinyinArray = pinyin(item.name, {
					style: pinyin.STYLE_FIRST_LETTER, // 提取拼音首字母
				});
				if (pinyinArray.length > 0) {
					firstLetter = /[a-zA-Z]/.test(pinyinArray[0][0].toUpperCase()) ? pinyinArray[0][0].toUpperCase() :
						"#"; // 获取拼音首字母并转换为大写
				} else {
					// 如果没有拼音首字母,则归类为#
					firstLetter = "#";
				}
			}

			if (!newList[firstLetter]) {
				newList[firstLetter] = [];
			}
			newList[firstLetter].push(item);
		}
		// 将键按字母顺序排序
		const sortedKeys = Object.keys(newList).sort((a, b) => {
			if (a === '#') return 1;
			if (b === '#') return -1;
			return a.localeCompare(b);
		});

		const sortedNewList = {};
		for (const key of sortedKeys) {
			sortedNewList[key] = newList[key];
		}
		console.log(sortedNewList, sortedKeys);
		indexList.value = sortedKeys
		list.value = sortedNewList;
	}
	onPageScroll(e => {
		this.scrollTop = e.scrollTop;
	})
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>

到了这里,关于基于uniapp与uview做一个按拼音首字母排序的通讯录页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C语言---认识动态内存管理并实现一个动态通讯录:静态通讯录别来沾边

    👧个人主页:@小沈熬夜秃头中୧⍤⃝❅ 😚小编介绍:欢迎来到我的乱七八糟小星球🌝 📋专栏:C语言学习 🔑本章内容:动态内存管理 送给各位💌:当你的能力还驾驭不了你的目标时那你就应该沉下心来历练 记得 评论📝 +点赞👍 +收藏😽 +关注💞哦~ 提示:以下是本篇

    2024年02月08日
    浏览(92)
  • 用python做一个通讯录系统

    用python的easygui模块做一个简易通讯录的系统 它一共有3个功能:         1. 添加联系人         2. 查找联系人         3. 删除联系人 先看一下主界面: 下面是写入联系人的界面:  下面是查询联系人的界面: 它可以通过联系人姓氏开头的拼音查找、姓名开头查找、手机号码查找

    2024年02月08日
    浏览(52)
  • 基于Android的手机通讯录设计

    目 录 1.系统描述 1 1.1 问题描述 1 1.2 功能描述 1 1.3 数据需求 2 1.4 设计意义 2 2.背景介绍 2 2.1 Android系统概述 2 2.2 Android开发组件 4 2.2.1 Activity组件 4 2.2.2 Service 组件 7 2.2.3 BroadcastReceiver 组件 8 2.2.4 Content Provider 组件 8 2.3 Android数据库 9 2.3.1 SQLite数据库 9 2.3.2 SQLite数据库特点 10

    2024年02月09日
    浏览(79)
  • 数据结构——基于顺序表实现通讯录

    1)⾄少能够存储100个⼈的通讯信息 2)能够保存⽤⼾信息:名字、性别、年龄、电话、地址等 3)增加联系⼈信息 4)删除指定联系⼈ 5)查找制定联系⼈ 6)修改指定联系⼈ 7)显⽰联系⼈信息 我们之前创建的顺序表可以实现连续存储数据(类型可以为整型、字符等),但无

    2024年02月05日
    浏览(42)
  • 【(数据结构)—— 基于单链表实现通讯录】

    (1). 知识要求 C语言基础要求:结构体、动态内存管理、单链表、文件件操作 (2). 功能要求 1)至少能够存储100个人的通讯信息 2)能够保存用户信息:名字、性别、年龄、电话、地址等 3)增加联系人信息 4)删除指定联系人 5)查找制定联系人 6)修改指定联系人 7)显示联系

    2024年02月08日
    浏览(43)
  • 【C语言】——动态内存管理与文件操作,后面加一个通讯录福利,万字解读,看完你会有一个全新认识

    目录 一.动态内存管理 1.为什么有动态内存管理 2.malloc和free  2.calloc和realloc 3.柔性数组 二.文件操作 1.为什么使用文件  2.二进制文件和文本文件  3.文件的打开和关闭 4.文件的顺序读写 5.文件缓冲区 三.通讯录  1.预处理  2.基本框架 3.初始化函数 4.增加联系人  5.显示联系人

    2024年03月13日
    浏览(39)
  • C++基于MFC的通讯录系统(链表)

    深入理解面向对象技术的封装性、继承性和多态性,掌握面向对象程序设计方法。 综合应用C++基础知识实现小型应用程序开发。 掌握使用C++流类库实现数据文件访问的操作方法。 熟悉基于对话框的MFC应用程序创建过程,掌握ClassWizard工具和常 windows 11, visual studio 2022 设计一个

    2024年01月25日
    浏览(96)
  • 如何基于钉钉通讯录生成LDAP服务

    这是一个很有意思的需求,即 通过基于钉钉通讯录搭建LDAP服务, 场景非常的典型,用户已经有了钉钉的组织架构来管理员工身份,那么如何利用当前的钉钉组织架构和用户身份,生成对外的LDAP服务呢? 为何要生成LDAP服务? 因为,企业内有不少应用的登录和账号管理,可以

    2023年04月09日
    浏览(65)
  • 基于单链表的通讯录C语言实现

     关于单链表的详细了解请见博主的另一篇博客,本文旨在对单链表进行应用,采用C语言编写。

    2024年04月15日
    浏览(55)
  • 网络编程——基于TCP协议的通讯录【课程设计】

    题目:基于TCP协议的通讯录 设计目标: (1)了解Socket通信的原理,在此基础上编写一个基于TCP协议的通讯录; (2)理解TCP通信原理; 课程设计系统组成及模块功能: 此TCP/IP课程设计实现了基于TCP的客户/服务器通信程序,需要实现以下一些基本功能: (1)客户端连接服务

    2024年02月06日
    浏览(84)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包