ionic2

ionic下拉刷新上拉加载

2017-10-12  本文已影响86人  HughesCZB

1、下拉刷新
html

<!--写在页面顶部-->
<ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()"></ion-refresher>

controller.js

$scope.doRefresh = function (){
    getComment.then(function(res){  //请求新数据
      if(res.result=="success") {
        $scope.allComment = res.data;  //数据更新操作
        $scope.$broadcast('scroll.refreshComplete');  //记得加上这段
      }
    })
  }

2、上拉加载
html

<!--写在页面底部-->
<ion-infinite-scroll on-infinite="loadMore()" ng-if="hasmore" distance="1%"></ion-infinite-scroll>
<div style="background-color:#fff;text-align:center" ng-if="!hasmore">没有更多了</div>

controller.js

$scope.hasmore = true;
$scope.loadMore = function() {
    $scope.pageNum ++;
    $http({
        method: 'GET',
        url: '/data/allComment/allComment'+$scope.pageNum+'.json'
    }).then(function successCallback(res) {
            if(res.data.result=="success"){
              if(res.data.data.length!=0){
                res.data.data.forEach(function(item){
                  $scope.allComment.push(item)
                })
                $scope.$broadcast('scroll.infiniteScrollComplete');
              }else{
                $scope.hasmore = false;
                $scope.$broadcast('scroll.infiniteScrollComplete');
              }

            }
        }, function errorCallback(res) {
            // 请求失败执行代码
            $scope.hasmore = false;
            $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  }

记得每次上拉结束都要加上这句

 $scope.$broadcast('scroll.infiniteScrollComplete');
上一篇 下一篇

猜你喜欢

热点阅读