Angular_上拉刷新

1.先不做上拉触发，用button模拟一下，触发函数

export class StudyComponent implements OnInit {

  /*列表数据流 */
  list$: Observable<any[]>;
  /*页面缓存*/
  beh: BehaviorSubject<any[]>;
  /*模拟下拉事件 */
  scrolEvent = new Subject();

  ngOnInit() {
    /*订阅scrolEvent，下方scrol()执行next的时候会跑这个订阅 */
    this.scrolEvent.pipe(
      map(() => {
        this.getdata();
      })
    ).subscribe();
  }

  constructor() {
    this.list$ = new Observable<any[]>();
    this.beh = new BehaviorSubject<any[]>([]);
  }

  /*获取数据 */
  getdata() {
    this.list$ = this.beh; // 提供观察者next新数据
    const oldlist = this.beh.getValue(); // 取旧数据
    this.serve()
      .subscribe(v => {
        this.beh.next(oldlist.concat(v));
      });
  }

  /*滚动触发函数 */
  scrol() {
    this.scrolEvent.next();
  }

  /*模拟接口返回数据 */
  serve() {
    return of([Math.random() * 100, Math.random() * 10, Math.random()]);
  }
}

　　html

<ng-container *ngIf="list$ | async as list">
  <div>
    <p *ngFor="let item of list">{{item}}</p>
  </div>
</ng-container>

<button (click)="scrol()">列表</button>

2.若是有两个列表（像顶部tab有  待处理、全部）

export class StudyComponent implements OnInit {

  /*列表数据流 */
  list$: Observable<any[]>;
  /*模拟下拉事件 */
  scrolEvent = new Subject();
  /*两个页面数据 缓存*/
  segData: {
    flag1: BehaviorSubject<any[]>,
    flag2: BehaviorSubject<any[]>
  };
  /*当前页标签 默认页面1*/
  curFlag = 'flag1';

  ngOnInit() {
    this.list$ = new Observable<any[]>();
    // this.segData.flag1 = new BehaviorSubject<any[]>([]);
    // this.segData.flag2 = new BehaviorSubject<any[]>([]);
    this.segData = {
      flag1: new BehaviorSubject<any[]>([]),
      flag2: new BehaviorSubject<any[]>([])
    };

    /*订阅scrolEvent，下方scrol()执行next的时候会跑这个订阅 */
    this.scrolEvent.pipe(
      map(() => {
        this.getdata(this.curFlag);
      })
    ).subscribe();
  }

  constructor() {
  }

  /*获取数据 */
  getdata(flag: string) {
    this.list$ = this.segData[flag]; // list$指向一个segData
    const oldlist = this.segData[flag].getValue(); // 取旧数据
    this.serve(this.curFlag)
      .subscribe(v => {
        this.segData[flag].next(oldlist.concat(v));
      });
  }

  /*滚动触发函数 */
  scrol(flag: string) {
    this.curFlag = flag;
    this.scrolEvent.next();
  }

  /*模拟接口返回数据 */
  serve(flag: string) {
    return of(
      [
        Math.random() * 100 + flag,
        Math.random() * 10 + flag,
        Math.random() + flag]
    );
  }
}

　　html

<ng-container *ngIf="list$ | async as list">
  <div>
    <p *ngFor="let item of list">{{item}}</p>
  </div>
</ng-container>

<button (click)="scrol('flag1')">列表1</button>
<button (click)="scrol('flag2')">列表2</button>