介绍
本示例主要介绍了List组件实现二级联动(Cascading List)的场景。 该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。
效果图预览
使用说明:
- 滑动二级列表侧控件,一级列表随之滚动。
- 点击一级列表,二级列表随之滚动。
实现思路
-
构造懒加载数据源类型MyDataSource。
-
一二级列表分别绑定不同的Scroller对象,一级列表(tagLists)绑定classifyScroller对象,二级列表绑定scroller对象。
@Component
export struct SecondaryLinkExample {
private classifyScroller: Scroller = new Scroller(); // 一级列表Scroller对象
private scroller: Scroller = new Scroller(); // 二级列表Scroller对象build() {
...Row() { // 一级列表 List({ scroller: this.classifyScroller, initialIndex: 0 }) { ... } }
}
} -
通过循环,构造一二级列表数据。
ForEach(this.tagLists, (item: string, index: number) => {
ListItem() {
...
}
}) -
点击一级列表后,通过一级列表的索引获取二级列表的索引,调用scrollToIndex方法将一二级列表滚动到指定索引值。
// 根据一级列表索引值获取二级列表索引值
findItemIndex(index: number): number {
return this.records[index];
}build(){
Column() {
...
}.onClick(() => { // 一级列表点击事件
this.currentTagIndex = index;
let itemIndex = this.findItemIndex(index);
this.scroller.scrollToIndex(itemIndex, true);
})
} -
滑动二级列表触发组件滚动事件后,获取到列表可视区域第一个item对应的索引值,通过二级列表索引获取一级列表索引,调用scrollToIndex方法将一级列表滚动到指定索引值。
@State @Watch('onIndexChange') currentTagIndex: number = 0; // 一级列表焦点索引值
private isClickTagList: boolean = false; // 是否点击一级列表
private classifyScroller: Scroller = new Scroller(); // 一级列表Scroller对象// 根据二级列表索引值获取对应一级列表索引
findClassIndex(index: number): number {
...
}build() {
List() {
...
}.onScrollIndex((start: number) => {
let currentClassIndex = this.findClassIndex(start);
// 当前二级列表元素是否属于当前一级列表类
if (currentClassIndex !== this.currentTagIndex && this.isClickTagList !== true) {
this.currentTagIndex = currentClassIndex;
this.classifyScroller.scrollToIndex(currentClassIndex, true); // 滚动到指定位置
}
})
}
高性能知识点
本示例使用了LazyForEach进行数据懒加载,List布局时会根据可视区域按需创建ListItem组件,并在ListItem滑出可视区域外时销毁以降低内存占用。
工程结构&模块类型
secondarylinkage // har
|---pages
| |---DataType.ets // 数据类型定义
| |---SecondaryLinkExample.ets // 二级联动功能实现页面
模块依赖
当前场景依赖common模块的FunctionDescription组件,主要用于功能场景文本介绍。详细可参考FunctionDescription文件。
参考资料
为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:https://qr21.cn/FV7h05
-
应用开发导读(ArkTS)
-
......
HarmonyOS 概念:https://qr21.cn/FV7h05
- 系统定义
- 技术架构
- 技术特性
- 系统安全
如何快速入门:https://qr21.cn/FV7h05
-
基本概念
-
构建第一个ArkTS应用
-
......
开发基础知识:https://qr21.cn/FV7h05
-
应用基础知识
-
配置文件
-
应用数据管理
-
应用安全管理
-
应用隐私保护
-
三方应用调用管控机制
-
资源分类与访问
-
学习ArkTS语言
-
......
基于ArkTS 开发:https://qr21.cn/FV7h05
-
Ability开发
-
UI开发
-
公共事件与通知
-
窗口管理
-
媒体
-
安全
-
网络与链接
-
电话服务
-
数据管理
-
后台任务(Background Task)管理
-
设备管理
-
设备使用信息统计
-
DFX
-
国际化开发
-
折叠屏系列
-
......