Ionic4.x ion-infinite-scroll 上拉分页加载更多

最新推荐文章于 2020-10-31 08:03:39 发布

weixin_30709061

最新推荐文章于 2020-10-31 08:03:39 发布

阅读量154

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/loaderman/p/10973459.html

版权

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
      <ion-list>
        <ion-item *ngFor="let item of list">
          <ion-label>{{item.title}}</ion-label>
        </ion-item>        
      </ion-list>

      

      <ion-infinite-scroll threshold="10%" (ionInfinite)="loadMore($event)">
        <ion-infinite-scroll-content loadingSpinner="crescent" loadingText="加载中...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

      <p *ngIf="!hasMore">---我是有底线的---</p>
      

</ion-content>

import { Component } from '@angular/core';


import { HttpserviceService } from '../services/httpservice.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  public list:any[]=[];

  public page:any=1;

  public hasMore=true;

  constructor(public httpService:HttpserviceService){

  } 
  ngOnInit(): void {
    
      this.getData();
  }

  getData(){

      var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
      this.httpService.get(api).then((response:any)=>{
          console.log(response)
          this.list=response.result;
          ++this.page;
      })

  }
  loadMore(e){
    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
      this.httpService.get(api).then((response:any)=>{
          console.log(response)
          this.list=this.list.concat(response.result);
          ++this.page;
          //判断下一页有没有数据
          if(response.result.length<20){
            e.target.disabled=true;

            this.hasMore=false;
          }
          e.target.complete(); //请求完成数据以后告诉ion-infinite-scroll更新数据
      })
  }
}

http服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class HttpserviceService {

  constructor(public http:HttpClient) { }

  get(api){

    return new Promise((resolve,reject)=>{
        this.http.get(api).subscribe((response)=>{

          resolve(response);

        },(err)=>{
          reject(err);
          
        })
    })

  }
}

转载于:https://www.cnblogs.com/loaderman/p/10973459.html