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() * , Math.random() * , 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() * + flag,
Math.random() * + 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>

Angular_上拉刷新的更多相关文章

  1. SwipeRefreshLayout + RecyclerView 实现 上拉刷新 和 下拉刷新

    下拉刷新和上拉刷新都用SwipeRefreshLayout 自带的进度条 布局 <?xml version="1.0" encoding="utf-8"? ...

  2. 使用MJRefresh遇到的一个问题,上拉刷新后tableview瞬间滑到最底部

    最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshvi ...

  3. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

  4. Android UI之下拉刷新上拉刷新实现

    在实际开发中我们经常要用到上拉刷新和下拉刷新,因此今天我写了一个上拉和下拉刷新的demo,有一个自定义的下拉刷新控件 只需要在布局文件中直接引用就可以使用,非常方便,非常使用,以下是源代码: 自定义的 ...

  5. Android PullToRefreshListView上拉刷新和下拉刷新

    PullToRefreshListView实现上拉和下拉刷新有两个步骤: 1.设置刷新方式 pullToRefreshView.setMode(PullToRefreshBase.Mode.BOTH) ...

  6. ListView(2)最简单的上拉刷新,下拉刷新

    最简单的上拉刷新和下拉刷新,当listview滚动到底部时向上拉刷新数据.当listview滚动到最顶部时下拉刷新.       图1,上拉刷新 图2,下拉刷新 1,设置lisview,加载heade ...

  7. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  8. Swiper+JS 上拉刷新

    JS // 上拉刷新                        var page = 2;            var isAjax = true;//加载数据前状态            $( ...

  9. iOS MJRefresh下拉、上拉刷新自定义以及系统详细讲解

    更新: MJRefresh 更新功能,默认根据数据来源 自动显示 隐藏footer,这个功能可以关闭 DoctorTableView.mj_footer.automaticallyHidden = N ...

随机推荐

  1. Extjs3 + swfUpload实现多文件上传控件

    要在ExrtJS框架实现选择多文件上传,FileUploadField已经无法满足需求,所以采用了 swfUpload上传控件,上传窗口如下: 多选文件进行上传(其实是每个文件异步上传),可以中途停止 ...

  2. 用Scala实现集合中相邻元素间的差值

    欢迎转载,转载请注明出处,徽沪一郎. 概要 代码这东西,不写肯定不行,新学Scala不久,将实际遇到的一些问题记录下来,日后也好查找. 今天讲的是如何计算同一集合中元素两两之间的差值,即求开始集合(a ...

  3. oracle导入imp导出exp命令的简单使用

    1.登录: 原始: 用户名:sys 密 码:安装oracle设置的口令 数据库:ip:port/数据库名(默认是orcl) 连接为:SYSDBA 用户: 用户名:safe_csmp 密 码:safe_ ...

  4. xsheell的下载安装初级使用

    1)关于Xshell 网上更多的资料里提到的SSH客户端是putty,因为简单.开源.免费.但是也正是由于功能过于简单,所以在这里推荐大家使用Xshell. Xshell最初并不能免费使用,而且也没有 ...

  5. VMware Workstation虚拟机使用ISO映像文件

    VMware Workstation虚拟机使用ISO映像文件 VMware Workstation虚拟机使用ISO映像文件

  6. html5 PACS漫谈

    2012年html5标准制定之后,其中canvas标签给程序猿提供了图像绘制的接口. 在医疗领域从事PACS开发的我发现BS结构的PACS系统开发有了新可能,不再需要客户端安装flash.active ...

  7. DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱.不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬.(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...).已经上班两天了,公司大部分人还在休假,而我早已上班, ...

  8. Android各版本特性

    此篇文章可以利用碎片化时间进行消化和了解,针对Android各个版本特性,并没有把所有列出,只是抽出了比较常用重要的特性作为提示,同时在面试中只要牢记重要的几个点即可,其他特性直接查找官方文档即可. ...

  9. Linux系统安装IonCube的方法详解教程

    ioncube是业内优秀的php加密解密解决方案.和zend guard相比,ioncube具有如下优势: 1. 安全:zend guard的版本不是非常安全,网络上有破解使用zend,下面我们来看I ...

  10. Rabbitmq 安装后采坑

    一.接手项目 接手项目后,按别人说的先安装什么,后安装什么然后就可以用了,也不去看什么.先开始安装的是otp_win64_19.1工具包和rabbitmq-server-3.6.5服务端,在win10 ...