首先看看我這個支援 infinite scroll 的 Angular 應用的執行時效果：

https://jerry-infinite-scroller.stackblitz.io/

滾動滑鼠中鍵，向下滾動，可以觸發 list 不斷向後臺發起請求，載入新的資料：

![](https://img-blog.csdnimg.cn/img_convert/4b08e17e855ab9ad76a47da5a325aca3.png)

下面是具體的開發步驟。

(1) app.component.html 的原始碼：

```html
<div>
  <h2>{{ title }}</h2>
  <ul id="infinite-scroller" appinfinitescroller="" scrollperecnt="70">
    <li item="" of="" news="">{{ item.title }}</li>
  </ul>
</div>

```
這裡我們給列表元素 ul 施加了一個自定義指令 appInfiniteScroller，從而為它賦予了支援 infinite scroll 的功能。

[scrollCallback]="scrollCallback" 這行語句，前者是自定義執行的 input 屬性，後者是 app Component 定義的一個函式，用於指定當 list 的 scroll 事件發生時，應該執行什麼樣的業務邏輯。

app component 裡有一個型別為集合的屬性 news，被 structure 指令 ngFor 展開，作為列表行專案顯示。

(2) app Component 的實現：

```typescript
import { Component } from '@angular/core';
import { HackerNewsService } from './hacker-news.service';

import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  currentPage: number = 1;
  title = '';
  news: Array<any> = [];

scrollCallback;

constructor(private hackerNewsSerivce: HackerNewsService) {
    this.scrollCallback = this.getStories.bind(this);
  }

getStories() {
    return this.hackerNewsSerivce
      .getLatestStories(this.currentPage)
      .pipe(tap(this.processData));
    // .do(this.processData);
  }

private processData = (news) => {
    this.currentPage++;
    this.news = this.news.concat(news);
  };
}

```

![](https://img-blog.csdnimg.cn/img_convert/28899a9fef5deb6c74bd74e00f3bdbdc.png)

把函式 getStories 繫結到屬性 scrollCallback 上去，這樣當 list scroll 事件發生時，呼叫 getStories 函式，讀取新一頁的 stories 資料，將結果合併到陣列屬性 this.news 裡。讀取 Stories 的邏輯位於 hackerNewsService 裡完成。

(3) hackerNewsService 透過依賴注入的方式被 app Component 消費。

```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const BASE_URL = 'https://node-hnapi.herokuapp.com';

@Injectable()
export class HackerNewsService {
  constructor(private http: HttpClient) {}

getLatestStories(page: number = 1) {
    return this.http.get(`${BASE_URL}/news?page=${page}`);
  }
}

```

(4) 最核心的部分就是自定義指令。

```typescript
import { Directive, AfterViewInit, ElementRef, Input } from '@angular/core';

import { fromEvent } from 'rxjs';

import { pairwise, map, exhaustMap, filter, startWith } from 'rxjs/operators';

interface ScrollPosition {
  sH: number;
  sT: number;
  cH: number;
}

const DEFAULT_SCROLL_POSITION: ScrollPosition = {
  sH: 0,
  sT: 0,
  cH: 0,
};

@Directive({
  selector: '[appInfiniteScroller]',
})
export class InfiniteScrollerDirective implements AfterViewInit {
  private scrollEvent$;

private userScrolledDown$;

// private requestStream$;

private requestOnScroll$;

@Input()
  scrollCallback;

@Input()
  immediateCallback;

@Input()
  scrollPercent = 70;

constructor(private elm: ElementRef) {}

ngAfterViewInit() {
    this.registerScrollEvent();

this.streamScrollEvents();

this.requestCallbackOnScroll();
  }

private registerScrollEvent() {
    this.scrollEvent$ = fromEvent(this.elm.nativeElement, 'scroll');
  }

private streamScrollEvents() {
    this.userScrolledDown$ = this.scrollEvent$.pipe(
      map(
        (e: any): ScrollPosition => ({
          sH: e.target.scrollHeight,
          sT: e.target.scrollTop,
          cH: e.target.clientHeight,
        })
      ),
      pairwise(),
      filter(
        (positions) =>
          this.isUserScrollingDown(positions) &&
          this.isScrollExpectedPercent(positions[1])
      )
    );
  }

private requestCallbackOnScroll() {
    this.requestOnScroll$ = this.userScrolledDown$;

if (this.immediateCallback) {
      this.requestOnScroll$ = this.requestOnScroll$.pipe(
        startWith([DEFAULT_SCROLL_POSITION, DEFAULT_SCROLL_POSITION])
      );
    }

this.requestOnScroll$
      .pipe(
        exhaustMap(() => {
          return this.scrollCallback();
        })
      )
      .subscribe(() => {});
  }

private isUserScrollingDown = (positions) => {
    return positions[0].sT < positions[1].sT;
  };

private isScrollExpectedPercent = (position) => {
    return (position.sT + position.cH) / position.sH > this.scrollPercent / 100;
  };
}

```
首先定義一個 ScrollPosition 介面，包含三個欄位 sH
, sT 和 cH，分別維護 scroll 事件物件的三個欄位：scrollHeight，scrollTop 和 clientHeight.

我們從施加了自定義指令的 dom 元素的 scroll 事件，構造一個 scrollEvent$ Observable 物件。這樣，scroll 事件發生時，scrollEvent$ 會自動 emit 出事件物件。
![](https://img-blog.csdnimg.cn/img_convert/a35efb57b59c4a38d526e5da6a85abd1.png)

因為這個事件物件的絕大多數屬性資訊，我們都不感興趣，因此使用 map 將 scroll 事件物件對映成我們只感興趣的三個欄位：scrollHeight, scrollTop 和 clientHeight：

![](https://img-blog.csdnimg.cn/img_convert/31f9ae58ab83a1ef0db6e70a594ccf6b.png)

但是僅僅有這三個點的資料，我們還無法判定當前 list 的 scroll 方向。

![](https://img-blog.csdnimg.cn/img_convert/73744a1324a9f143ec39b0c85cd255ac.png)

所以使用 pairwise 這個 rxjs 提供的運算子，將每兩次點選生成的座標放到一個陣列裡，然後使用函式 this.isUserScrollingDown 來判斷，當前使用者 scroll 的方向。

如果後一個元素的 scrollTop 比前一個元素大，說明是在向下 scroll：

```typescript
  private isUserScrollingDown = (positions) => {
    return positions[0].sT < positions[1].sT;
  };
```

我們並不是檢測到當前使用者向下 scroll，就立即觸發 HTTP 請求載入下一頁的資料，而是得超過一個閥值才行。

這個閥值的實現邏輯如下：

```typescript
private isScrollExpectedPercent = (position) => {
    console.log('Jerry position: ', position);
    const reachThreshold =
      (position.sT + position.cH) / position.sH > this.scrollPercent / 100;
    const percent = ((position.sT + position.cH) * 100) / position.sH;
    console.log('reach threshold: ', reachThreshold, ' percent: ', percent);
    return reachThreshold;
  };
```

如下圖所示：當閥值到達 70 的時候，返回 true：

![](https://img-blog.csdnimg.cn/img_convert/f3fd8d19c30147bfba4fa1c9f1fb75d2.png)</any>

使用 RxJs 實現一個支援 infinite scroll 的 Angular Component

相關文章