HarmonyOS 可滚动容器组件的控制器Scroller如何停止滚动？

Question

使用Scroller的scrollTo方法进行滚动动画时，如何在滚动时手动停止滚动。

Answer 1

Scroller并未直接提供手动停止滚动的方法，您可以重新再调用scrollTo方法滚动到当前位置达到停止的效果，请参考以下示例：

// xxx.ets
import { curves } from '@kit.ArkUI'

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }, (item: string) => item)
        }.width('100%')
      }
      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(10) // 滚动条宽度
      .friction(0.6)
      .edgeEffect(EdgeEffect.None)
      .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
        console.info(xOffset + ' ' + yOffset)
      })


      .onScrollEdge((side: Edge) => {
        console.info('To the edge')
      })
      .onScrollStop(() => {
        console.info('Scroll Stop')
      })
      Button('开始')
        .height('5%')
        .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离
          const yOffset: number = this.scroller.currentOffset().yOffset;

          this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 200, animation: { duration: 3000, curve:Curve.Linear } })
        })
        .margin({ top: 60, left: 20 })
      Button('停止')
        .height('5%')
        .onClick(() => { // 点击后滑动到指定位置，偏移量未增加，即为停止效果
          const yOffset: number = this.scroller.currentOffset().yOffset;

          this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset })

        })
        .margin({ top: 160, left: 20 })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}