ionic ——— 下拉刷新及上拉加载

最近项目中使用了ionic的下拉刷新及上拉加载的功能;下拉刷新还好写,但是在做上拉加载的时候遇到了点问题,下面先给大家把这个两个功能的代码代码写上,然后在说问题。


HTML页面:

<ion-content ng-controller="MyController">
  <!--下拉刷新-->
  <ion-refresher
    pulling-text="下拉刷新..."
    on-refresh="doRefresh()">
  </ion-refresher>
  <ion-list>
    <ion-item ng-repeat="item in items"></ion-item>
  </ion-list>
  <!--上拉加载--当用户到达页脚或页脚附近时,ionInfiniteScroll指令允许你调用一个函数-->
  <!--当用户滚动的距离超出底部的内容时,就会触发你指定的on-infinite-->在ion-content标签内增加下面的代码,很多童鞋上拉刷新实现不了,就是因为这段代码没有加到content标签内,因为只有在标签内的元素,才会有scroll的效果。
 <ion-infinite-scroll
    ng-if="moreDataCanBeLoaded()"
    icon="ion-loading-c"
    on-infinite="loadMoreData()">
  </ion-infinite-scroll>
</ion-content>

其中 ng-if 是,当没有更多数据加载时,使其等于false,将会禁止上拉加载on-infinite = "loadMoreData()"执行;

controller里面的js代码:

angular.module('testApp', ['ionic'])
  .controller('MyController', function($scope, $http) {
    $scope.items = [];
    $scope.doRefresh = function() {
      $http.get('/new-items')
        .success(function(newItems) {
          $scope.items = newItems;
        })
        .finally(function() {
          // 停止广播ion-refresher
          $scope.$broadcast('scroll.refreshComplete');
        });
    };
    $scope.loadMore = function() {
      $http.get('/more-items').success(function(items) {
        $scope.items = $scope.items .concat(items);
        /*
         *1.使用一个定时器,为了实现当返回的DOM都加载完之后,在广播执行结束上拉加载的动作;
         * 2.如果不使用这个定时器,虽然数据请求回来了,但是内容还没有冲满整个屏幕,这是加载动作已经结束,它就会再自动执行一次或者多次加载,造成数据错误
         */
        var timer = $timeout(function(){
          // 停止广播上拉加载请求
          $scope.$broadcast('scroll.infiniteScrollComplete');
        })
      });
    };
    $scope.$on('stateChangeSuccess', function() {
      $scope.loadMore();
    });
  });

至于上拉加载和下拉刷新的具体业务逻辑我看很多博客上都用了分页请求数据的方式,我们的项目可能因为别的原因,只采用下拉刷新请求最新的十条,上拉加载请求以此类推的后十条,本人觉得这样做是不太合理的,如果大家有什么好的方法可以在下方给我留言,谢谢!


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值