在HarmonyOS NEXT开发中Scroll是否支持onendreachedthreshold，配合endreached事件使用， 距离底部多少触发 endreached 事件？

Question

在HarmonyOS NEXT开发中Scroll是否支持onendreachedthreshold，配合endreached事件使用， 距离底部多少触发 endreached 事件？

Answer 1

组件实现可通过判断偏移量来实现，demo如下：

import display from '@ohos.display'; 
 
@Entry 
@Component 
struct page240510141709017 { 
  scroller: Scroller = new Scroller() 
  @State yOffset: number = 0 
  @State yPosition: number = 150 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
  private childH: number = 0 
  private screenH: number = 0 
 
  build() { 
    Column() { 
      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%') 
        .onAppear(() => { 
          this.childH = this.scroller.getItemRect(0).height 
          console.log('this.childH', this.childH) 
        }) 
      } 
      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 
      .scrollBar(BarState.On) // 滚动条常驻显示 
      .scrollBarColor(Color.Gray) // 滚动条颜色 
      .scrollBarWidth(10) // 滚动条宽度 
      .friction(0.6) 
      .edgeEffect(EdgeEffect.None) 
      .width('100%') 
      .height('100%') 
      .onDidScroll(() => { 
        if (!this.screenH) { 
          let displayClass: display.Display | null = null; 
          displayClass = display.getDefaultDisplaySync() 
          this.screenH = px2vp(displayClass.height) 
          console.log('this.screenH', this.screenH) 
        } 
        const yCurrentOffset = this.scroller.currentOffset().yOffset 
        console.log('yCurrentOffset', yCurrentOffset) 
        if (yCurrentOffset < 100) { 
          console.log('is < top 100') 
        } else if (yCurrentOffset > this.childH - this.screenH - 100) { 
          console.log('is > bottom 100') 
        } 
      }) 
    }.width('100%').height('100%').backgroundColor(0xDCDCDC) 
  }