未验证 提交 9abada75 编写于 作者: D duangavin123 提交者: Gitee

update zh-cn/third-party-cases/how-to-group-contacts-with-alphabet.md.

Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
上级 dc436131
# 如何按字母分组展示联系人(仅UI)
# 如何按字母分组展示联系人
## 场景说明
在通讯录中,需要将联系人按照姓氏的首字母进行分组排列,从而更方便联系人的查找;联系人列表右侧的字母导航可以随列表的滑动而定位到对应字母处;同时,也可以通过字母导航控制列表跳到指定联系人分组。
本例即为大家介绍如何通过实现上述场景。
本例即为大家介绍如何实现上述场景。
## 效果呈现
本示例最终效果如下:
......@@ -23,7 +23,7 @@
## 开发步骤
针对上述关键特性,具体实现步骤如下:
1、通过Stack、List、ListItemGroup、AlphabetIndexer等关键组件将UI框架搭建起来。
1、通过Stack、List、ListItemGroup、AlphabetIndexer等关键组件将UI框架搭建起来。
先构建列表数据,其中Contact为联系人数据类。
```ts
contactGroups: object[] = [
......@@ -113,7 +113,7 @@ struct ContactList{
![contactframe](figures/contactframe.PNG)
2、接下来我们为UI框架添加逻辑控制。首先,通过List的onScrollIndex事件获取到列表滑动位置的索引,并将索引同步给右侧字母表的selected属性,从而在滑动联系人时,使右侧字母导航随之变动,关键代码如下:
2、接下来为UI框架添加逻辑控制。首先,通过List的onScrollIndex事件获取到列表滑动位置的索引,并将索引同步给右侧字母表的selected属性,从而在滑动联系人时,使右侧字母导航随之变动,关键代码如下:
```ts
...
// 创建动态变量,用于指定字母导航的选择项
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册