在HarmonyOS NEXT 中 scroller手动停止的方法？

Question

在HarmonyOS NEXT 中 scroller手动停止的方法？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

你可以使用scrollTo方法来滑动到指定位置：

// demo.ets 
import Curves from '@ohos.curves' 
 
@Entry 
@Component 
struct ScrollExample { 
  scroller: Scroller = new Scroller() 
  private arr: number[] = [] 
 
  aboutToAppear(): void { 
    for (let i = 0; i < 100; i++) { 
      this.arr.push(i) 
    } 
  } 
 
  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.Spring) 
      .onScroll((xOffset: number, yOffset: number) => { 
        console.info(xOffset + ' ' + yOffset) 
      }) 
      .onScrollEdge((side: Edge) => { 
        console.info('To the edge') 
      }) 
      .onScrollStop(() => { 
        console.info('Scroll Stop') 
      }) 
 
      Button('中断，执行其他逻辑') 
        .height('5%') 
        .onClick(() => { 
          let curve = Curves.interpolatingSpring(10, 1, 228, 30) //创建一个阶梯曲线 
          const yOffset: number = this.scroller.currentOffset().yOffset; 
          this.scroller.scrollTo({ 
            xOffset: 0, 
            yOffset: yOffset, 
            // animation: { duration: 1000, curve: curve, canOverScroll: true } 
          }) 
        }) 
        .margin({ top: 110, left: 20 }) 
 
    }.width('100%').height('100%').backgroundColor(0xDCDCDC) 
  } 
}