HarmonyOS scroller有没有手动停止的方法?

如题:HarmonyOS scroller有没有手动停止的方法?

阅读 559
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)
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进