在鸿蒙开发中如何实现scroll、list单边回弹效果 ？

Question

在鸿蒙开发中如何实现scroll、list单边回弹效果 ？

Answer 1

在 onDidScroll 里获取 currentOffset().yOffset 来控制单边回弹效果，在 list 组件还可以通过 onScrollIndex 实现单边回弹效果。
参考代码：

@Entry
@Component
struct Index {
  @State yOffset: number = 0
  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) // 滚动条颜色
    }
  }
}

Answer 2

可以在onDidScro11事件中获取当前滚动偏移量currentOffse（）.yOffset，并根据这个值来判断是否到达边缘，从而设置edgeEffect 属性。

@Entry
@Component
struct Index {
  @State yOffset: number = 0
  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) => {
            // ... 子组件的布局代码
          }, (item: string) => item)
        }
        .width('100%')
      }
      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .friction(0.6)
      .edgeEffect(this.yOffset <= 0 ? EdgeEffect.Spring : EdgeEffect.None) // 滚动到边沿后回弹
      .onDidScroll(() => {
        this.yOffset = this.scroller.currentOffset().yOffset;
      })
    }
    // ... 其他布局代码
  }
}