HarmonyOS NEXT应用开发案例——二级联动_鸿蒙next创新案例，2024年最新2024年面试实现思路构造懒

实现思路

构造懒加载数据源类型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); // 滚动到指定位置 } }) }