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>