一文彻底玩转Open Harmony三方库之从入门到实战，轻松拿捏lithe_refresh

ohpm install 库名 # 例如：ohpm install @abner/lithe_refresh

ohpm install @abner/lithe_refresh

// 导入组件
import { RefreshController, LitheRefresh } from '@abner/lithe_refresh';

@Component
struct RefreshDemo {
  @State dataList: string[] = [];
  @State page: number = 1;
  scroller = new Scroller();
  controller = new RefreshController();

  // 下拉刷新逻辑：模拟加载新数据
  async loadNewData() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.dataList = [`新数据1`, `新数据2`, `新数据3`]; // 清空旧数据，加载最新
    this.controller.finishRefresh(); // 告诉组件刷新完成
  }

  // 上拉加载逻辑：模拟加载更多数据
  async loadMoreData() {
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.page++;
    this.dataList.push(`第${this.page}页数据1`, `第${this.page}页数据2`); // 追加数据
    this.controller.finishLoadMore(); // 告诉组件加载完成
  }

  @Builder
  build() {
    LitheRefresh({
      scroller: this.scroller,
      controller: this.controller,
      itemLayout: () => {
        // 列表布局，展示数据
        List({ scroller: this.scroller }) {
          ForEach(this.dataList, (item) => {
            ListItem() {
              Text(item)
                .padding(15)
                .border({ width: 1, color: "#E0E0E0" })
            }
          })
        }
      },
      onRefresh: this.loadNewData.bind(this), // 绑定下拉刷新事件
      onLoadMore: this.loadMoreData.bind(this) // 绑定上拉加载事件
    })
    .margin(10)
    .statusBar({ backgroundColor: "#F5F5F5" })
  }
}

LitheRefresh({
  // ...其他配置
  refreshHeader: () => { // 自定义下拉刷新头
    Text("下拉刷新")
      .fontSize(14)
      .color("#666")
  }
})