滑动组件如何实现单边spring的效果？

Question

如题：滑动组件如何实现单边spring的效果？

Answer 1

示例代码

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

  build() {
    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 : number) => item.toString())
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(this.yOffset <= 0 ? EdgeEffect.Spring : EdgeEffect.None) // 滚动到边沿后回弹
    .onScroll(()=> {
      this.yOffset = this.scroller.currentOffset().yOffset;
    })
  }
}