ionic4滑动加载（ion-infinite-scroll）

效果图如下：
并不是此代码的结果，下面代码只是我源码的部分，但应该够用了。

   <ion-list lines="none" inset="true" class="listfen" *ngFor="let record of pressRecordList; index as i;"><ion-item><span style="width:80%"><span *ngIf="record.integral >= 0 "><img src="../../../assets/imgs/dianZan.1.png">&nbsp;&nbsp;{{record.signInfo}}</span><span *ngIf="record.integral < 0 "><img src="../../../assets/imgs/kulian.png">&nbsp;&nbsp;{{record.signInfo}}</span><br><span class="updateTime">{{record.pressTime}}</span></span><p style="width:20%; padding-left:5%">{{record.integral}}分</p></ion-item></ion-list><!-- 显示正在加载。。。 --><ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="150px"><ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多..."></ion-infinite-scroll-content></ion-infinite-scroll><!-- 如果isend为true，显示没有更多内容 --><div [hidden]="!isend"><ion-row><ion-col class="nodata" text-center>没有更多内容啦 ♪(^∇^*)</ion-col></ion-row></div>
```ts
//窗体加载触发的事件queryPressRecord(InfiniteScroll) {const dataUrl = '...略 + '/' + this.pagenum + '/' + this.pagesize;      const that = this;this.http.get(dataUrl).subscribe(res => {...略//如果是最后一页，则isend 标记为true，然后再取出isFirstPage if (res.json().data.data.isLastPage === true) {this.isFirstPage = res.json().data.data.isFirstPage;this.isend = true;                   }       // 当页面多余1页时滑到顶部的按钮显示if (that.pagenum > 1) {this.totop = true;}that.pagenum++;   //每次刷新完，都把正在刷新隐藏起来     if (InfiniteScroll) {InfiniteScroll.target.complete();if (res.json().data.data.isLastPage) {InfiniteScroll.target.disabled = false;}}略}}//执行下拉刷新doInfinite(infiniteScroll) {//如果是第一页，则隐藏ion-infinite-scroll，即“正在加载更多”if (this.isFirstPage) {infiniteScroll.target.complete();infiniteScroll.target.disabled = false;} else {//如果不是第一页，则继续刷新（调用queryPressRecord（方法））this.queryPressRecord(infiniteScroll);}}```html
<!-- 上面的ion-list 和ion-item 可以换长div，个人感觉更方便调样式 --><div class="div1" *ngFor="let item of libraryDetailList"><div><span style="float:left">#{{item.bookName}}</span><span style="float:right">{{item.result}}</span></div></div>

ionic4滑动加载（ion-infinite-scroll）相关推荐

WordPress下拉加载插件Infinite Scroll之手动点击加载实现
本文基于上一篇博文<WordPress 无限分页下拉加载插件(Infinite Scroll)功能使用记录>而写,上文说到WordPress插件Infinite Scroll的自动加载分页 ...
js控制页面滑动加载
目前页面滑动加载数据是很流行的一种方式,尤其是在手机端,应用也越来越广泛了,我在做项目的时候也遇到了,其实实现方式很简单,只是几行简单的代码就I可以搞定了,下面直接看代码 $(function() { ...
滑动加载怎么做 php,vue之UI框架如何实现滑动加载数据
在我们移动端还有一个很常用的组件,那就是滑动加载更多组件.平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现 ...
scrollview 实现滑动到底部再滑动加载数据的功能
思路:在滑动基础上添加scrollview到底检测事件 1.首先检测是否滑动 [java] view plaincopy // 滑动加载 scrollView.setOnTouchListener(n ...
程矢Axure夜话：Axure手机原型视频教程之中继器上下滑动加载更多
案例描述:中继器上下滑动加载更多知识点: 中继器复合使用效果图: 在线效果预览:(firefox原型文件) AxShare在线效果预览: 原型下载地址:中继器上下滑动加载更多.rp 在线视频: 实 ...
Android横向滑动加载更多的控件的实现---HorizontalScrollSlideView
Android横向滑动加载更多的控件的实现-HorizontalScrollSlideView 需求之前公司业务要求做一个横向滑动的,可以加载更多的控件,第一时间想到的就是 RecyclerView ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
Android UI滑动加载源码
2019独角兽企业重金招聘Python工程师标准>>> android UI 往右滑动,滑动到最后一页就自动加载数据并显示如图: Java代码 package cn.anycall ...
Android 上千张图片的列表滑动加载
一般项目中图片加载用的比较多的是ImageLoader 但是需求自己配置一些参数上手有些复杂对于手机图库中有上千张图片需要加载时一个使用性能很好的库Glide可以解决效果图如下滑动非常流畅 ...

ionic4滑动加载（ion-infinite-scroll）

ionic4滑动加载（ion-infinite-scroll）相关推荐

最新文章

热门文章