鸿蒙List组件上拉加载和下拉刷新

背景：

app的列表需要分页加载，初始方案是使用list组件的onReachEnd事件进行触发，但是使用以后会发现有问题这个东西，刚进入页面加载的时候因为数据还没加载出来会触发这个事件，还有如果页面数据较少没有撑满这一页也会一直触发，综合考虑下来使用第三方库有一个封装的组件：PullToRefresh

代码实现：

一.调用组件

这个代码列表刷新方法在父组件所以onRefresh中使用emitter去进行事件传递来进行刷新数据，如果不需要，可以替代自己的请求数据方法

PullToRefresh({
          // 必传项，列表组件所绑定的数据
          data: this.NoCrimelist,
          // 必传项，需绑定传入主体布局内的列表或宫格组件
          scroller: this.scroller,
          // 必传项，自定义主体布局，内部有列表或宫格组件
          customList: () => {
            // 一个用@Builder修饰过的UI方法
            this.getListView();
          },
          // 可选项，下拉刷新回调
          onRefresh: () => {
            return new Promise<string>((resolve, reject) => {
              // 重新计数
              this.pageNum =1
              let eventData: emitter.EventData = {
                data: {
                  "page": this.pageNum,
                }
              };
              
                emitter.emit('refReshListId',eventData)
                resolve('刷新成功');

            });
          },
          // 可选项，上拉加载更多回调
          onLoadMore: () => {
            return new Promise<string>((resolve, reject) => {
              let eventData: emitter.EventData = {
                data: {
                  "page": this.pageNum +1,
                  type:1
                }
              };
       
                emitter.emit('refReshListId',eventData)
                resolve('');
           
            });
          },
          customLoad: null,
          customRefresh: null,
        })

二.传入的list列表

注意！！！ 一定要设置edgeEffect属性为none否则不会滚动，并且初始化Scroller

private scroller: Scroller = new Scroller();
@Builder getListView(){
    List({ space: 20,scroller:this.scroller }) {
      ForEach(this.NoCrimelist, (item: ListBean,index:number) => {
        ListItem() {
          
        }
      }, (item: ListBean) => item.applayTime)
    }
    .edgeEffect(EdgeEffect.None)
  }