最全HarmonyOS NEXT应用开发案例——二级联动_鸿蒙next创新案例(1)，2024年最新鸿蒙开发工程师面试-CSDN博客

本文链接：https://blog.csdn.net/2401_84871031/article/details/138694130

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

实现思路

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