HarmonyOS 开发-二级联动

@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); // 滚动到指定位置
    }
  })
}

   secondarylinkage                                // har
   |---pages
   |   |---DataType.ets                            // 数据类型定义 
   |   |---SecondaryLinkExample.ets                // 二级联动功能实现页面