zoukankan      html  css  js  c++  java
  • 9、下拉刷新 与 上拉加载

    老样子 贴代码 。

    /* ---示例代码----*/
     
    <ion-navbar *navbar>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>My First List</ion-title>
    </ion-navbar>
     
    <ion-content>
     
      <ion-refresher (refresh)="doRefresh($event)">
        <ion-refresher-content
                pullingIcon="arrow-dropdown"
                pullingText="Pull to refresh"
                refreshingSpinner="circles"
                refreshingText="Refreshing...">
        </ion-refresher-content>
      </ion-refresher>
     
      <ion-list>
        <ion-item *ngFor="let i of items">{{i}}</ion-item>
      </ion-list>
     
      <ion-infinite-scroll (infinite)="doInfinite($event)">
        <ion-infinite-scroll-content
                loadingSpinner="bubbles"
                loadingText="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
     
    </ion-content>
     
    /* ---示例代码----*/
    我把初始化项目的 list.html 改成了这个样子。简单分析一下 其实跟 ionic1 没什么两样 。
    值得注意的就是 (infinite)="doInfinite($event)" 和  (refresh)="doRefresh($event)"
    不过值得注意的是 他比ionic1好很多 当 item没有值得时候 进这个页面 他默认 会不加载 这就代表着。他不会读取页面的时候 你还要 判断一下一下是否可以让他加载。
    之后我把list.js也改掉了。
    /* ---示例代码----*/
     
    import {Page, NavController, NavParams} from 'ionic-angular';
    import {ItemDetailsPage} from '../item-details/item-details';
     
     
    @Page({
      templateUrl: 'build/pages/list/list.html'
    })
    export class ListPage {
     
      items = [];
     
      constructor() {
        for (var i = 0; i < 30; i++) {
          this.items.push( this.items.length );
        }
      }
      doRefresh(refresher) {
        console.log('Begin async operation', refresher);
     
        setTimeout(() => {
          this.items = [];
          for (var i = 0; i < 30; i++) {
            this.items.push( this.items.length );
          }
          console.log('Async operation has ended');
          refresher.complete();
        }, 2000);
      }
     
      doInfinite(infiniteScroll) {
        console.log('Begin async operation');
     
        setTimeout(() => {
          for (var i = 0; i < 30; i++) {
            this.items.push( this.items.length );
          }
     
          console.log('Async operation has ended');
          infiniteScroll.complete();
        }, 500);
      }
     
    }
     
    /* ---示例代码----*/

    要注意就是红色部分。当异步的数据处理完之后 必须 调用complete 才可以 这点和 ionic1 很像。

  • 相关阅读:
    Windows 显示隐藏文件
    Python 程序一行代码解决乘法口诀表
    【转发】基于Bert-NER构建特定领域的中文信息抽取框架(上)
    【转发】GET和POST两种基本请求方法的区别
    【转发】实现yolo3模型训练自己的数据集总结
    第十章集合总结
    2016-2017 201671010134 异常处理
    JAVA基础编程
    2016-2017 201671010134 第六章总结
    java总结
  • 原文地址:https://www.cnblogs.com/dandingjun/p/5562577.html
Copyright © 2011-2022 走看看