angular+rxjs无限滚动加载组件轮子

前言

昨天将之前收藏的一篇 Angular 和 RxJS 实现的无限滚动加载文章仔细看完,并动手实现了一遍代码。项目中也用到过类似的滚动加载功能,就当是给自己造个轮子用了。

因为原文章主要侧重于知识点的讲解和代码逻辑实现,造出来的组件并不具备通用性,所以自己在源码的基础上抽取出了一个通用性的infinite-scroll的抽象组件类,使其能适用于任何滚动加载型的应用场景。

代码

先看抽象组件类:InfiniteScrollComponent

export abstract class InfiniteScrollComponent {
    private cache = [];
    protected itemHeight: number;
    protected numberOfItems: number;
    protected isLoading = false;
    protected isEnding = false;

    get itemResults(): Observable {
        return this.itemResults$;
    }

    /** core */
    // 手动决定加载第几页数据的流
    private pageByManual$ = ...
    // scroll 事件的流
    private pageByScroll$ = ...
    // resize 事件的流
    private pageByResize$ = ...
    // 合并上述三个页码流
    private pageToLoad$ = ...
    // 基于pageToLoad$流来创建一个新的流,它将包含无限滚动加载列表中的数据
    private itemResults$ = ...
    /** end core */    

    abstract appendData(page: number): Observable;
}

核心代码部分基本照抄,只是将itemResults$中的http服务请求修改成调用一个抽象的appendData()函数。另外,为了屏蔽外界组件对rxjs流的困惑,增加了一个get itemResults()属性。最后增加了两个状态字段isLoading和isEnding,分别表示加载中和无更多数据,提高界面的友好性。

为了能够支持自定义的model,这里用了泛型。
由于该类是一个抽象类,所以需要外部组件来继承并实现抽象方法:

export class InfiniteScrollListComponent extends InfiniteScrollComponent
  implements OnInit {
  constructor(private infiniteScrollService: InfiniteScrollService) {
    super();
  }

  ngOnInit() {
    this.itemHeight = 40;
    this.numberOfItems = 10;
  }

  appendData(page: number): Observable {
    return this.infiniteScrollService.loadByPage(page);
  }
}

在该类的ngOnInit()函数中,设置了每个item的高度(即每行的高度)和每页加载的条目数。然后实现了appendData()方法,在这个方法里就可以根据业务逻辑去获取到不同的数据了。

值得注意的是,appendData()方法的page参数是存储抽象类中的,其实这个page参数也是整个数据流的核心,无论是哪种事件流,最终都转化为了计算出当前page值。

至此,基本就完工了,视图页可以自由发挥了。比如:

{{item.name}}
没有更多数据了...

项目源码已开源在github上,欢迎issue和star。

参考

Infinite scroll in Angular an RxJS
译. 使用 Angular 和 RxJS 实现的无限滚动加载
视口的宽高与滚动高度

你可能感兴趣的:(angular5,rxjs)