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

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

ohpm install @abner/lithe_refresh

// 导入组件import { RefreshController, LitheRefresh } from '@abner/lithe_refresh';
@Componentstruct 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")  }})