#鸿蒙通关秘籍#如何使用Scroller控制器滚动到指定位置并设置动画？

使用Scroller控制器，可以让Scroll组件滚动到指定位置，并为滚动动作设置动画效果。具体实现如下：

bash @Entry @Component struct ComponentTest {

private scroller: Scroller = new Scroller(); // 创建一个滚动控制器 private scrollDistance: number = 0; private items: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

build() {

Column() {
  Scroll(this.scroller) {                  // 绑定滚动控制器
    Column() {
      ForEach(this.items, (item) => {      // ForEach语法循环创建子组件
        Text("index: " + item)
          .fontSize(26)
          .width('90%')
          .height(120)
          .borderRadius(10)
          .backgroundColor(Color.White)
          .margin({top: 10})
      })
    }
    .width("100%")
  }
  .scrollable(ScrollDirection.Vertical)    // 设置竖直方向滚动
  .scrollBarColor(Color.Green)             // 设置滚动条颜色
  .scrollBarWidth(20)                      // 设置滚动条宽度
  .scrollBar(BarState.On)                  // 设置滚动条永久显示
  .width('100%')
  .height(220)
  .padding({top: 10, bottom: 10})
  .backgroundColor(Color.Pink)

  Button('scrollTo')
    .onClick(() => {
      this.scrollDistance = this.scrollDistance == 0 ? 280 : 0;
      this.scroller.scrollTo({
        xOffset: 180,                    // 竖直方向滚动，该值不起作用
        yOffset: this.scrollDistance,    // 滚动距离
        animation: {                     // 滚动动画
          duration: 1500,               // 动画持续时间
          curve: Curve.Smooth           // 使用平滑曲线
        }
      })
    })
}
.alignItems(HorizontalAlign.Center)
.width('100%')
.height(('100%'))
.padding(20)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

} }