实现联系人页面鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例是一个联系人列表demo，使用三方库@ohos/pinyin4js实现中文排序，根据联系人的姓名首字母进行排序；
动态获取所有联系人的首字母，在页面右侧生成字母导航，支持快速定位到某字母行。

实现联系人页面源码链接

效果预览

使用说明

使用了三方库@ohos/pinyin4js实现中文排序。

实现思路

1. 使用三方库@ohos/pinyin4js实现中文排序
2. 动态获取所有联系人的首字母，通过AlphabetIndexer在页面右侧生成字母导航。
3. 点击字母导航可以快速定位到该字母行 。
   核心代码如下：

// 第一个参数输入姓氏，会返回姓氏的首字母，然后根据字母排序
const firstLetter = pinyin4js.convertToPinyinString(firstChinese, '', pinyin4js.FIRST_LETTER)

1.
2.
3.
4.