HarmonyOS 鸿蒙Next--自定义ListStatusView：含首次进入骨架屏、空数据屏、错误重新请求屏、下拉加载、上拉刷新

HarmonyOS 鸿蒙Next–自定义ListStatusView：含首次进入骨架屏、空数据屏、错误重新请求屏、下拉加载、上拉刷新

0、自定义ListStatusView：含首次进入骨架屏、空数据屏、错误重新请求屏、下拉加载、上拉刷新

1、代码
```javascript
import { PullToRefresh } from '[@ohos](/user/ohos)/pulltorefresh';
import { R } from '[@ohos](/user/ohos)/res';
import { Constants } from '../../constants/Constants';
import { StyleConstants } from '../../constants/StyleConstants';
import { LoadingStatus } from '../../viewmodel/CommonEnums';
import { toast } from '../../utils/ToastUtils';
import { Logger } from '../../utils/Logger';

[@Component](/user/Component)
export struct ListStatusView {
  [@Link](/user/Link) [@Watch](/user/Watch)("listDataChange") listData: object[];
  [@Link](/user/Link) loadingStatus: LoadingStatus;
  [@BuilderParam](/user/BuilderParam) customSkeletonView: () => void = this.baseSkeletonView;
  [@BuilderParam](/user/BuilderParam) customFailureView: () => void = this.baseFailureView;
  [@BuilderParam](/user/BuilderParam) customEmptyView: () => void = this.baseEmptyView;
  [@BuilderParam](/user/BuilderParam) listView: () => void;
  listScroller: Scroller = new Scroller();
  [@State](/user/State) currentPage: number = 1;
  getList?: (page: number) => void;
  [@State](/user/State) columnOpacity: number = 1;
  resolve: ((value: string | PromiseLike<string>) => void) | undefined = undefined;

  aboutToAppear(): void {
    if (this.getList) {
      this.currentPage = 1
      this.getList(this.currentPage)
    }
  }

  listDataChange() {
    setTimeout(() => {
      if (this.resolve) {
        this.resolve(this.currentPage === 1 ? '刷新完成了' : '')
      }
    }, 100)
  }

  startAnimation(): void {
    animateTo(Constants.SKELETON_ANIMATION, () => {
      this.columnOpacity = 0.5;
    });
  }

  [@Builder](/user/Builder)
  baseSkeletonView() {
    Column() {
      Text("AI-ERP")
        .fontColor(R.color.color_ECECEC)
        .fontSize(R.float.vp40)
        .fontWeight(FontWeight.Bold)
    }
    .opacity(this.columnOpacity)
    .onAppear(() => {
      this.startAnimation();
    })
  }

  [@Builder](/user/Builder)
  baseFailureView() {
    Row() {
      Column() {
        Image($r('app.media.ic_failure'))
          .width(R.float.vp120)
          .height(R.float.vp120)
        Text(R.string.str_load_failed)
          .fontColor(R.color.color_reload_title_color)
          .fontFamily(StyleConstants.HARMONY_HEI_TI_FONT_FAMILY)
          .fontSize(R.float.fp14)
          .margin({ top: R.float.vp8 })

        Button(R.string.str_reload)
          .height(R.float.vp32)
          .fontColor(R.color.color_main_red_color)
          .fontFamily(StyleConstants.HARMONY_HEI_TI_FONT_FAMILY)
          .fontSize(R.float.fp12)
          .backgroundColor(Color.Transparent)
          .margin({ top: R.float.vp8 })
          .borderWidth(1)
          .borderColor(R.color.color_main_red_color)
          .borderRadius(R.float.vp16)
          .onClick(() => {
            if (this.getList) {
              this.currentPage = 1;
              this.getList(this.currentPage)
            }
          })

      }
    }
    .justifyContent(FlexAlign.Center)
  }

  [@Builder](/user/Builder)
  baseEmptyView() {
    List({ space: 0, scroller: this.listScroller }) {
      ListItem() {
        Column() {
          Image(R.media.ic_empty)
            .size({ width: R.float.vp120, height: R.float.vp120 })
          Text(R.string.str_empty_data)
            .fontColor("#DCDBDB")
            .fontSize(R.float.fp18)
            .margin({
              top: 10
            })
        }
        .justifyContent(FlexAlign.Center)
      }
      .width(Constants.FULL_PARENT)
      .height(Constants.FULL_PARENT)
    }
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
    .backgroundColor(R.color.colorPageBG)
    .width(Constants.FULL_PARENT)
    .layoutWeight(1)
  }

  build() {
    Stack() {
      if (this.loadingStatus === LoadingStatus.LOADING) {
        this.customSkeletonView() // 骨架屏
      }
      if (this.loadingStatus === LoadingStatus.FAILED) {
        this.customFailureView() // 错误屏
      }
      if (this.loadingStatus === LoadingStatus.SUCCESS || this.loadingStatus === LoadingStatus.NO_MORE) { // 加载完成或者是最后一页
        PullToRefresh({
          data: this.listData,
          scroller: this.listScroller,
          customList: () => {
            if (this.listData.length === 0) {
              this.customEmptyView()  //
            } else {
              this.listView()
            }
          },
          onRefresh: () => {
            return new Promise<void>((resolve, reject) => {
              this.currentPage = 1;
              if (this.getList) {
                this.getList(this.currentPage)
              }
              this.resolve = resolve
            });
          },
          onLoadMore: () => {
            return new Promise<void>((resolve, reject) => {
              if (this.loadingStatus === LoadingStatus.NO_MORE) {
                setTimeout(() => {
                  toast("没有更多数据了")
                  resolve('')
                }, 500)
                return
              }
              this.currentPage += 1;
              if (this.getList) {
                this.getList(this.currentPage)
              }
              this.resolve = resolve
            });
          },
          customLoad: null,
          customRefresh: null,
        })
          .width(StyleConstants.FULL_PERCENT)
          .layoutWeight(1)

      }
    }
    .layoutWeight(1)
  }
}

1、调用

ListStatusView({
  loadingStatus: this.loadingStatus,
  listData: this.listData,
  getList: (page): void => {
    // 请求列表数据
    this.workModel.getCCList(page)
      .then((res: ApplyListBean[]) => {
        this.listData = res
        this.loadingStatus = this.workModel.loadingStatus
      })
  },
  listView: () => {
    this.listViewBuilder();
  },
  listScroller: this.scroller
})