![](https://s5-media.51cto.com/ost/pc/static/noavatar.gif)
回复
本示例主要介绍了List组件实现二级联动(Cascading List)的场景。 该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。
使用说明:
@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() {
...
}
})
// 根据一级列表索引值获取二级列表索引值
findItemIndex(index: number): number {
return this.records[index];
}
build(){
Column() {
...
}.onClick(() => { // 一级列表点击事件
this.currentTagIndex = index;
let itemIndex = this.findItemIndex(index);
this.scroller.scrollToIndex(itemIndex, true);
})
}
@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组件,主要用于功能场景文本介绍。