ionic之上拉加载更多

最新推荐文章于 2020-03-08 19:59:41 发布

原创最新推荐文章于 2020-03-08 19:59:41 发布 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#函数 #上拉刷新 #ionic #angularjs

ionic 专栏收录该内容

31 篇文章

订阅专栏

我是代码

controller代码

.controller('articlePageCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', 'FinancList', '$timeout', function ($scope, $stateParams, $ionicSlideBoxDelegate, FinancList, $timeout) {

 $scope.articles = [{id: 0, avatar: 1, img: 2, title: 3, des: 4, see: 5},
        {id: 1, avatar: 1, img: 2, title: 3, des: 4, see: 5}];
 //上拉加载更多
      FinancList.param.hasmore = true;
      //上拉触发函数
      $scope.loadMore = function () {
        //这里使用定时器是为了缓存一下加载过程，防止加载过快
        $timeout(function () {
          if (!FinancList.param.hasmore) {
            $scope.$broadcast('scroll.infiniteScrollComplete');
            return;
          }
          $scope.articles.push(FinancList.getList())
          $scope.$broadcast('scroll.infiniteScrollComplete');
          FinancList.param.curPage++;
        }, 1500);
      };
      //控制列表是否允许其加载更多
      $scope.moreDataCanBeLoaded = function () {
        return FinancList.param.hasmore;
      }
})

html代码

在ion-content标签内增加下面的代码，很多童鞋上拉刷新实现不了，就是因为这段代码没有加到content标签内，因为只有在标签内的元素，才会有scroll的效果。

    <!--上拉更多 ng-if="moreDataCanBeLoaded()"-->
    <ion-infinite-scroll
      icon="ion-loading-c"
      ng-if="moreDataCanBeLoaded()"
      on-infinite="loadMore()"
      distance="10%">
    </ion-infinite-scroll>

service代码

  .factory('FinancList', function () {
    var param = {};
    //页码
    param.curPage = 1;
    param.hasmore = false;
    function getList() {
      return {id: 1, avatar: 1, img: 2, title: 3, des: 4, see: 5};
    }
    return {
      getList: getList,
      param: param
    };
  })