Angular_上拉刷新

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

export class StudyComponent implements OnInit {/*列表数据流 */list$: Observable;/*页面缓存*/beh: BehaviorSubject;/*模拟下拉事件 */scrolEvent = new Subject();ngOnInit() {/*订阅scrolEvent，下方scrol()执行next的时候会跑这个订阅 */this.scrolEvent.pipe(map(() => {this.getdata();})).subscribe();}constructor() {this.list$ = new Observable();this.beh = new BehaviorSubject([]);}/*获取数据 */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

"list$ | async as list">
"let item of list">{{item}}
"scrol()">列表

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

export class StudyComponent implements OnInit {/*列表数据流 */list$: Observable;/*模拟下拉事件 */scrolEvent = new Subject();/*两个页面数据 缓存*/segData: {flag1: BehaviorSubject,flag2: BehaviorSubject};/*当前页标签 默认页面1*/curFlag = 'flag1';ngOnInit() {this.list$ = new Observable();// this.segData.flag1 = new BehaviorSubject([]);// this.segData.flag2 = new BehaviorSubject([]);this.segData = {flag1: new BehaviorSubject([]),flag2: new BehaviorSubject([])};/*订阅scrolEvent，下方scrol()执行next的时候会跑这个订阅 */this.scrolEvent.pipe(map(() => {this.getdata(this.curFlag);})).subscribe();}constructor() {}/*获取数据 */getdata(flag: string) {this.list$ = this.segData[flag]; // list$指向一个segDataconst 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

"list$ | async as list">
"let item of list">{{item}}
"scrol('flag1')">列表1
"scrol('flag2')">列表2

转载于:https://www.cnblogs.com/wskxy/p/10497485.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！