效果圖：

第一步導(dǎo)入pinyin庫并應(yīng)用，用于區(qū)分漢字的拼音首字母

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() :
						"#"; // 獲取拼音首字母并轉(zhuǎn)換為大寫
				} 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;
	}

完整代碼（樣式自己定義）：文章來源地址http://www.zghlxwxcb.cn/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: "張學(xué)友"
		},
		{
			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() :
						"#"; // 獲取拼音首字母并轉(zhuǎn)換為大寫
				} 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>

到了這里，關(guān)于基于uniapp與uview做一個按拼音首字母排序的通訊錄頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！