HarmonyOS 同一页面其中一个列表跟随另一个列表滚动

参考demo：

@Entry
@Component
struct index240426171014042 {
  @State dataList: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

  private leftListScroller: Scroller = new Scroller()
  private rightListScroller: Scroller = new Scroller()
  private scrollFlag = -1 // 1=左边 2=右边

  build() {
    Row() {
      this.left()
      this.right()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#a68765')
  }

  // 左边
  @Builder
  left() {
    Column() {
      Text('表头').width(100).height(100)
      List({ scroller: this.leftListScroller }) {
        ForEach(this.dataList, (item: number, index) => {
          ListItem() {
            Row() {
              Text(`左边${item}`).width(100).textAlign(TextAlign.Center)
            }
            .width("100%")
            .height(100)
            .backgroundColor(Color.Blue)
          }
        })
      }
      .width(100)
      .height("100%")
      .cachedCount(5)
      .edgeEffect(EdgeEffect.None)
      .onScrollStart(() => {
        this.scrollFlag = 1
      })
      .onScrollStop(() => {
        this.scrollFlag = -1
      })
      /*.onScroll((scrollOffset, state) => {
      let yOffset = this.leftListScroller.currentOffset().yOffset
      if (this.scrollFlag == 1) {
      // this.rightListScroller.scrollBy(0, scrollOffset)
      this.rightListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
      }
      })*/
      .onScrollFrameBegin((offset: number, state: ScrollState) => {
        if (this.scrollFlag == 1) {
          let yOffset = this.leftListScroller.currentOffset().yOffset + offset
          this.rightListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
        } return { offsetRemain: offset }
      })
    }
  }

  // 右边
  @Builder
  right() {
    Scroll() {
      Column() {
        Text('表头').width(700).height(100)
        this.rightList()
      }
      .width(700)
      .height('100%')
      .alignItems(HorizontalAlign.Start)
      .backgroundColor(Color.Orange)
    }
    .width(700)
    .height('100%')
    // .layoutWeight(1)
    .scrollable(ScrollDirection.Horizontal)
    .backgroundColor(Color.Pink)
  }

  // 右边的列表
  @Builder
  rightList() {
    List({ scroller: this.rightListScroller }) {
      ForEach(this.dataList, (item: number, index) => {
        ListItem() {
          Row() {
            Text(`第一列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第二列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第三列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第四列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第五列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第六列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第七列${item}`).width(100).textAlign(TextAlign.Center)
          }
          .width('100%')
          .height(100)
        }
      })
    }
    .width(700)
    .height('100%')
    .edgeEffect(EdgeEffect.None)
    .backgroundColor(Color.Yellow)
    .onScrollStart(() => {
      this.scrollFlag = 2
    })
    .onScrollStop(() => {
      this.scrollFlag = -1
    })
    /*.onScroll((scrollOffset, state) => {
    let yOffset = this.rightListScroller.currentOffset().yOffset
    if (this.scrollFlag == 2) {
    // this.leftListScroller.scrollBy(0, scrollOffset)
    this.leftListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
    }
    })*/
    .onScrollFrameBegin((offset: number, state: ScrollState) => {
      if (this.scrollFlag == 2) {
        let yOffset = this.rightListScroller.currentOffset().yOffset + offset
        this.leftListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
      } return { offsetRemain: offset }
    })
  }

}