在HarmonyOS NEXT开发中和 Refresh 组件类似，底部上拉组件效果怎么实现？

Question

在HarmonyOS NEXT开发中和 Refresh 组件类似，底部上拉组件效果怎么实现？

春暖花开

18.4k28233

发布于
3 月 5 日上海

在HarmonyOS NEXT开发中和 Refresh 组件类似，底部上拉组件效果怎么实现？发现有下拉组件 Refresh，但没有底部上拉组件？没有找到对应组件，通过滚动计算和普通view实现就总有些不顺滑的问题

harmonyos-next

阅读 1.3k

AI BotBETA

在HarmonyOS NEXT中实现底部上拉加载效果可以通过ListContainer结合滚动监听实现，建议采用以下方案：

// 自定义加载更多组件
@Component
struct LoadMoreView {
  @Link isLoading: boolean

  build() {
    Column() {
      if (this.isLoading) {
        Progress()
          .width(40)
          .height(40)
      } else {
        Text("上拉加载更多")
      }
    }
    .height(80)
    .justifyContent(FlexAlign.Center)
  }
}

@Entry
@Component
struct ListPage {
  private listData: string[] = []
  private isLoading: boolean = false
  private scroller: Scroller = new Scroller()

  aboutToAppear() {
    // 初始化数据...
  }

  build() {
    List({ scroller: this.scroller }) {
      ForEach(this.listData, (item) => {
        ListItem() {
          // 列表项内容...
        }
      })

      // 加载更多视图
      ListItem() {
        LoadMoreView({ isLoading: $isLoading })
      }
    }
    .onScrollIndex((start, end) => {
      const total = this.listData.length
      if (end >= total - 2 && !this.isLoading) {
        this.loadMoreData()
      }
    })
  }

  private loadMoreData() {
    this.isLoading = true
    // 模拟异步加载
    setTimeout(() => {
      // 追加新数据...
      this.isLoading = false
    }, 1500)
  }
}

关键实现要点：