鸿蒙HarmonyOS NEXT实战开发：二级联动实现案例

介绍

本示例主要介绍了List组件实现二级联动（Cascading List）的场景。 该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。

效果图预览

使用说明：

1. 滑动二级列表侧控件，一级列表随之滚动。
2. 点击一级列表，二级列表随之滚动。

实现思路

1. 构造懒加载数据源类型MyDataSource。
2. 一二级列表分别绑定不同的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 }) {
        ...
      }
    }
  }
}

1. 通过循环，构造一二级列表数据。

ForEach(this.tagLists, (item: string, index: number) => {
  ListItem() {
    ...
  }
})

1. 点击一级列表后，通过一级列表的索引获取二级列表的索引，调用scro