手机上拉刷新 angular

最近需要做一个手机端的列表页 有上拉刷新功能 分次请求数据 ，因为就一个页面 所以所有的js都是script标签引入的 这里用的是ng-infinite-scroll.min.js

首先引入所需要的js

<script type="text/javascript" src="jgk/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jgk/js/angular.min.js"></script>
<script type='text/javascript' src='jgk/js/ng-infinite-scroll.min.js'></script>

然后创建模块时引入 infinite-scroll

var pointListen=angular.module("pointListen",['infinite-scroll']);

html数据渲染：

<div class="dataContainer">
    <ul>
        <div class="infinite-scroll-div" infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
            <li class="fl" ng-repeat="item in dataList">
                <div class="itemDiv">
                    <img src="{{item.headImgUrl}}">
                    <p class="username" ng-bind="item.nickName"></p>
                    <p class="time" ng-bind="item.onloadTime"></p>
                </div>
            </li>
            <div class="loading" ng-show="busy&&hasMore"><span>加载数据...</span></div>
        </div>
    </ul>

</div>
加载的动画样式需要自己加

loadMore是请求方法

$scope.busy=false;
$scope.hasMore=true

$scope.loadMore = function() {
 if($scope.busy&&!$scope.hasMore)return;
   $scope.busy=true
   $http.post("/jgk/getSnsUserForStudy.json", {
    "courseId": $scope.courseId,
    "pageNo": $scope.pageNo,
    "pageSize": $scope.pageSize
  }, postCfg).success(function (data) {
    if (data.code == "100") {
      if(data.result.data.length==0){
        $scope.busy=false;
        $scope.hasMore=false;
        return;
      }
      $scope.pageNo++;
      for (var i = 0; i < data.result.data.length; i++) {
        $scope.dataList.push(data.result.data[i]);
      }
      $scope.busy=false
    }
  })


}