效果图:
第一步导入pinyin库并应用,用于区分汉字的拼音首字母
npm i pinyin
import pinyin from "pinyin"
完整算法:文章来源:https://www.toymoban.com/news/detail-738851.html
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模板网!