ionic滑动加载

      首先页面上添加滚动条:

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
          <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多..."></ion-infinite-scroll-content>
    </ion-infinite-scroll>

      页面刷新:

    <ion-refresher (ionRefresh)="doRefresh($event)">
          <ion-refresher-content
            pullingIcon="arrow-dropdown"
            pullingText="下拉刷新"
            refreshingSpinner="circles"
            refreshingText="加载中...">
          </ion-refresher-content>
     </ion-refresher>

       对于页面分页加载:

requestData(InfiniteScroll){  
    var that=this;
    var url='网址'+this.id+'&pageSize='+this.pagesize+'&pageNum='+this.page;
    
    this.http.get(url).subscribe(res => {
      var response = res.json();
      if (response.length > 0) {
        that.data = that.mcoins.concat(response);
        this.datalength=this.mcoins.length;
      }
      else{
        // 对于内容是否加载完毕模块的隐藏属性设置
        this.isend = true;
      }
      // 当页面多余1页时滑到顶部的按钮显示
      if (that.page > 1) { 
        this.totop = true; }

      that.page++;

      if (InfiniteScroll) {
        InfiniteScroll.complete();
        if (response < 20) {
          InfiniteScroll.enable(false);
        }
      }
    },
      error => {
        console.log(error);
      })
  }
  // 滚动条触发事件
    doInfinite(infiniteScroll){
      this.requestData(infiniteScroll);
    }
   // 滚动条是否显示
  scrollToBottom() {
    if (this.content.scrollToBottom) {
      this.content.scrollToBottom();
    }
  }




      

     


     

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值