zoukankan      html  css  js  c++  java
  • 上拉加载、下拉更新

    1.上拉加载

      引用官网给出的代码

    <ion-content>
    <ion-list> <ion-item *ngFor="let item of list"> {{item}} </ion-item> </ion-list>  <!-- 这是官网给的代码,必须放在列表下方 -->
      <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    
    
    </ion-content>

      ts:

      public list = [];
      public sum = 0;
      constructor() {
        this.setdata();
      }
      setdata() {
        for (let i = 0; i < 10; i++) { //模拟获取数据
          this.sum += 1;
          this.list.push(`第${this.sum}条数据`)
        }
      }
      doInfinite(event) {
        setTimeout(() => {
          this.setdata();
          event.complete();//提交更新
          console.log(1);
          if(this.sum>=50){
            event.enable(false);//终止上拉
          }
        }, 2000);
      }

    2.下拉更新

      同样,用官网的代码

    <ion-content>
      <!-- 这个要放在列表前面 -->
      <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉更新" refreshingSpinner="circles" refreshingText="正在更新">
        </ion-refresher-content>
      </ion-refresher>
    
      <ion-list>
        <ion-item *ngFor="let item of list;let key=index" [navPush]="NewsinfoPage" [navParams]="params">
          {{item}}
        </ion-item>
      </ion-list>
    </ion-content>

      然后写doRefresh方法

     public list = [];
      sum = 0;
      constructor() {
        this.setdata();
      }
    
      setdata() {
        let temp=[];
        for (let i = 0; i < 10; i++) {
          temp.push(`第${i}条数据,第${this.sum}次更新`);
        }
        this.list=temp;
      }
      doRefresh(event) {
        setTimeout(() => {
          this.sum+=1;//模拟更新
          this.setdata();
          event.complete();
        }, 2000);
      }

      

  • 相关阅读:
    2020.2.5随笔
    2020.2.4
    2020.2.3随笔
    2020.2.2随笔
    2020/2/1随笔
    python3 百度AI-v3之 人脸对比 & 人脸检测 & 在线活体检测 接口
    python:Json模块dumps、loads、dump、load介绍
    python3之selenium.webdriver 库练习自动化谷歌浏览器打开百度自动百度关键字
    python之https爬虫出现 SSL: CERTIFICATE_VERIFY_FAILED (同时打开fiddler就会出现)
    调试python 程序的几种方法总结
  • 原文地址:https://www.cnblogs.com/wskxy/p/9690532.html
Copyright © 2011-2022 走看看