HarmonyOS Swiper组件在displayMode的AUTO\_LINEAR被废弃之后如何实现原来的效果？

Question

Swiper的displayMode不能设置为AUTO\_LINEAR之后,对应的效果应该怎样实现，看文档及注释说是用ScrollTo替代，但感觉不是同一个东西，能否给个demo说明？

Answer 1

请参考List来实现：

@Entry
@Component
export struct ListH {
  private listScroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    List({ space: 40, initialIndex: 0 }) {

      ForEach(this.arr, (item: number) => {
        ListItem() {
          Column() {
            Image($r("app.media.app_icon"))
              .width(60)
              .height(60)
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }
        .width(60)
        .height(60)
      }, (item: string) => item)

    }
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off)
    .width('100%')
    .height(200)
    .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
    .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
      console.info('first' + firstIndex)
      console.info('last' + lastIndex)
      console.info('center' + centerIndex)
    })
    .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => {
      console.log(' start index: ' + start.index +
        ' start item group area: ' + start.itemGroupArea +
        ' start index in group: ' + start.itemIndexInGroup)
      console.log(' end index: ' + end.index +
        ' end item group area: ' + end.itemGroupArea +
        ' end index in group: ' + end.itemIndexInGroup)
    })
    .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
      console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
    })
  }
}

请参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5\#%E7%A4%BA%E4%BE%8B1