`

ionic2 + cordova 应用-列表刷新(上拉)

阅读更多

9.1 列表使用(欢迎加入Q群一起学习讨论657185219)

<ion-content>

  <ion-list>
    <ion-list-header>Follow us on Twitter</ion-list-header>
    <ion-item *ngFor="let i of items">
      <!--<ion-icon name="ionic" item-left></ion-icon>-->
      @ionicframework{{i}}
    </ion-item>
  </ion-list>


  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="上滑加载">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

 

9.2 控制层

export class ContactPage {
  items = [];
  constructor(public navCtrl: NavController) {
    for (let i = 0; i < 5; i++) {
      this.items.push( this.items.length );
    }
  }


  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 5; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

}

 

分享到:
评论

相关推荐

    ionic+Angular+Cordova初学者文档

    "2 ionic项目简介以及Angularjs 基础.pdf"引导读者进入ionic世界,讲解了ionic框架的构建原理和它与AngularJS的紧密关系。AngularJS是一个强大的前端MVC框架,它的数据绑定和依赖注入等特性使得开发变得更加高效。...

    使用Ionic2制作移动应用

    - **运行应用**:通过 `ionic serve` 命令可以在浏览器中预览应用,而 `ionic run android` 或 `ionic run ios` 可以在模拟器或真机上运行。 ##### 第二课:剖析Ionic2项目结构 - **项目文件夹**:了解项目的文件夹...

    ionic 上拉加载和下拉刷新demo

    本示例“ionic 上拉加载和下拉刷新demo”着重于介绍如何在 Ionic 应用中实现上拉加载(infinite scroll)和下拉刷新(pull-to-refresh)功能,这两种功能对于提供流畅用户体验至关重要,特别是当处理大量动态数据时...

    ionic支持库(包括命令行和插件)

    对于原生功能的测试,可以使用`ionic cordova run android`或`ionic cordova run ios`在模拟器或设备上运行。 - **打包与发布**:完成开发后,使用`ionic cordova build android --prod`或`ionic cordova build ios ...

    ionic-hybrid-app-demo:使用angularJS和ionic的混合应用程序演示

    本文将深入探讨“ionic-hybrid-app-demo”,这是一个使用AngularJS和Ionic框架构建的混合应用程序示例。混合应用程序结合了原生移动应用的功能与Web技术的优势,使得开发者可以用HTML、CSS和JavaScript来创建跨平台...

    ionic2-reddit-reader:Ionic 2示例应用程序

    要在手机上运行该应用,您需要安装cordova插件: cordova plugin add cordova-plugin-whitelist , cordova plugin add cordova-plugin-inappbrowser 未来需要改进/参与的领域 拉刷新 没有连接信息 Subreddits自动...

    ionic应用实用模板

    **Ionic应用实用模板详解** Ionic框架是开发跨平台移动应用的一种流行选择,它基于AngularJS,并结合了Cordova/PhoneGap技术,使得开发者能够用HTML、CSS和JavaScript编写原生感观的应用。在这个"ionic应用实用模板...

    ionic安装及常见问题的解决方法

    ### ionic安装及常见问题的解决方法 #### 一、Ionic环境配置与基本操作 **1. 使用淘宝镜像加速NPM安装** 由于NPM默认的仓库在国外,可能导致下载速度较慢,为了提高效率,我们可以使用淘宝镜像来加速安装过程。 ...

    mojio-js-cordova-example-oauth2

    【标题】"mojio-js-cordova-example-oauth2"是一个示例项目,演示了如何在基于Cordova和Ionic框架的移动应用中实现OAuth 2.0授权协议。OAuth 2.0是一种广泛用于安全授权的标准,允许第三方应用在用户许可的情况下...

    ionic-cli:基于ionic3+angular5构建的养车app

    "离子发球" 可能是指 "ionic serve" 命令,这是 Ionic CLI 提供的一个功能,用于启动一个本地开发服务器并实时刷新应用,每当代码发生变化时,开发者可以在浏览器中立即看到更新。这对于快速迭代和调试应用非常有用...

    ionic-v1-bucket-list:准备实习

    Ionic v1提供了丰富的UI组件,如导航、滑动、下拉刷新等,使得开发者能够专注于应用功能的实现,而不用过多关注视觉样式。在`ionic-v1-bucket-list`中,它负责提供用户界面和触摸友好的交互体验。 3. **CouchDB**:...

    ionic-1.x资源

    - **响应式设计**:Ionic旨在构建跨平台应用,因此理解和应用响应式布局原则,确保在不同尺寸和方向的屏幕上都能良好运行,是非常重要的。 - ** Ionic组件**:熟悉 Ionic 的各种组件,如 ion-list、ion-header-bar...

    ionic-cache:具有IndexedDB,SQLite和WebSQL支持的Ionic和Angular缓存服务

    可以在Angular 2应用程序中单独使用它。 主要特点: 请求缓存 延迟的可观察缓存(有关更多信息,请参阅文档) 如果浏览器处于离线状态,请勿使缓存无效 设置条目组并使它们无效 通过Ionic Storage支持IndexedDB...

    ionic-contactlist:联系人列表沙箱(ionic、cordova、angularjs)

    在Cordova应用中,可以通过Cordova插件来使用这个API。在“ionic-contactlist”中,很可能存在一个这样的插件,用于获取设备上的联系人列表并显示在应用中,或者允许用户添加、编辑或删除联系人。 **项目结构** 一...

    ionic 案例源码 Mallzee

    - **Cordova插件**:结合Apache Cordova,Ionic能够调用设备原生API,如相机、GPS等,实现与原生应用相媲美的功能。 - **响应式设计**:利用Flexbox布局,Ionic应用能自适应不同屏幕尺寸,确保在各种设备上表现...

    ionic模版源代码

    Angular 提供了一种声明式编程方式,使得前端开发更加高效,而 Ionic 则在此基础上提供了针对移动设备优化的UI组件和交互设计,如侧滑菜单、下拉刷新、加载指示器等,为开发者构建原生感观的应用提供了便利。...

    ionic HTML5 移动应用框架 v7.7.3.zip

    使用 Ionic 开发的应用可以通过Cordova或 Capacitor 运行在Android和iOS平台上,实现真正的原生功能,比如访问设备的相机、联系人、地理位置等。Cordova是一个插件系统,它允许Web应用调用设备的API,而Capacitor是...

    一个ionic2样板项目

    本项目提供的"一个ionic2样板项目"是一个预配置的启动模板,旨在帮助开发者快速启动新的Ionic 2应用程序,遵循Angular和Ionic的开发最佳实践。 1. ** Ionic 2基础知识 ** - **架构**:Ionic 2基于TypeScript构建...

    前端项目-ionic.zip

    Cordova是Ionic原生打包的关键,它允许开发者使用Web技术构建的应用运行在移动设备上,通过插件系统访问设备的硬件功能,如摄像头、GPS等。然而,随着 Capacitor 的推出,Ionic 开始向更现代的Web技术栈靠拢。...

    ionic2-salesforce-sample:样品申请

    本文将深入探讨“ionic2-salesforce-sample”项目,这是一个基于Ionic 2框架和Salesforce后端的联系人管理器示例应用。这个项目为开发者提供了一个实用的模板,用于了解如何将 Ionic 2 与 Salesforce API 结合,构建...

Global site tag (gtag.js) - Google Analytics