ionic 上拉加载和下拉刷新

1、view:

<ion-view title="质检历史">
    <ion-content>
      <ion-refresher pulling-text=" 下拉刷新" refreshing-text=" 正在刷新 ..." on-refresh="refresh()">
      </ion-refresher>
      <ion-list>
        <div class="list card" ng-repeat="item in zjhisitems">
          <div class="item">
            <div class="row">
              <p class="col"><b>单号:{{item.reptno}}</b></p>
            </div>
          </div>
        </div>
      </ion-list>
      <ion-infinite-scroll on-infinite="loadMore()" immediate-check="false" distance="10%" ng-if="ifMore"></ion-infinite-scroll>
    </ion-content>
</ion-view>

只有一个字段意思一下。
ion-infinite-scroll 很方便,当数据没有填充到界面底部时会自动调用(也就是第一次进到该页面时会自动调用一次)。

2、controller:

  // 是否停止上拉加载
  $scope.ifMore = ZjHisItems.gethasmore();
  // 绑定数据
  $scope.zjhisitems = ZjHisItems.getitems();

  $scope.loadMore = function() {
    ZjHisItems.listitems().then(function(data) {
      if (data.errmsg != "") {
        if (data.errmsg == "tologin")
            $location.path('/login').replace();
        else
            $ionicLoading.show({ template: '错误:'+resp.errmsg, noBackdrop: true });
      }else {
          if (data.list.length > 0){
            ZjHisItems.setlastid(data.list[data.list.length - 1].iid); 
            ZjHisItems.setitems(data.list);
          }else {
            $scope.ifMore = false;
            ZjHisItems.sethasmore(false);
          }
          $scope.$broadcast('scroll.infiniteScrollComplete');
      }
    });
  }

  $scope.refresh = function() {
    ZjHisItems.setlastid(0); 
    ZjHisItems.clearitems();
    $scope.ifMore = true;
    ZjHisItems.sethasmore(true);
    $scope.loadMore();
    $scope.$broadcast('scroll.refreshComplete');
  }

3、service:

.factory('ZjHisItems', function($http, $q, $ionicLoading, UserInfos) {
  var hisitems = [];
  var lastid = 0;
  var hasmore = true;
  return {
    listitems: function() {
      var deferred = $q.defer();
      $http.jsonp(UserInfos.geturl(), {params: {userid: UserInfos.get("userid"), iid: lastid, option: 'zjhis', sid: UserInfos.get("sessionid")}, timeout: 5000})
        .success(function(resp, status, headers, config) {
          deferred.resolve(resp); 
        })
        .error(function() {
          deferred.reject();
          $ionicLoading.hide();
          $ionicLoading.show({ template: '网络错误,你可以稍候重试!', duration: 1000, noBackdrop: true });
        });
      return deferred.promise;
    },
    setitems: function(items) {
        for (var i=0;i<items.length;i++) {
            var dict = {};
            for (var k in items[i]) {
                dict[k] = items[i][k];
            }
            hisitems.push(dict);
        }
    }, 
    clearitems: function() {
        hisitems.length = 0;
    },
    getitems: function() {
        return hisitems;
    },
    getlastid: function() {
        return lastid;
    },
    setlastid: function(id) {
        lastid = id;
    },
    gethasmore: function() {
        return hasmore;
    },
    sethasmore: function(b) {
        hasmore = b;
    }
  }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值