angular中如何实现上拉无限加载

最新推荐文章于 2019-03-08 18:17:00 发布

赵海辛

最新推荐文章于 2019-03-08 18:17:00 发布

阅读量2.7k

点赞数 1

分类专栏： AngularJS 文章标签： angularjs html5 javascript web 移动开发

本文链接：https://blog.csdn.net/zhaohaixin0418/article/details/53336854

版权

AngularJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

昨天差点被这个上拉无限加载搞死= =，现在终于弄好了……希望能帮到需要的人。

这里我们需要ng-infinite-scroll.js，我的博客有免费的下载资源：http://download.csdn.net/detail/zhaohaixin0418/9693690，下载完记得给个评分哦。下载好后，我们开始写页面代码，首先引用你的ng项目所要引用到的所有js和css。

<html ng-app="haixin">
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no maximum-scale=1,minimum-scale=1">
   <meta http-equiv="X-UA-Compitable" content="IE=edge">
   <link rel="stylesheet" href="public/css/font-awesome.css">
   <link rel="stylesheet" href="public/css/bootstrap.css">
   <link rel="stylesheet" href="public/css/reset.css">
   <link rel="stylesheet" href="public/css/index.css">
   <link rel="stylesheet" href="public/css/animation.css">
   <script src="public/js/jquery-2.2.3.min.js"></script>
   <script src="public/js/bootstrap.js"></script>
   <script src="public/js/angular.js"></script>
   <script src="public/js/angular-route.js"></script>
   <script src="public/js/angular-animate.js"></script>
   <script src="public/js/angular-touch.js"></script>
   <script src="public/js/ng-infinite-scroll.js"></script>
</head>
</html>

这里如果有人没有angular的那些js文件，可以去我的资源库下载：http://download.csdn.net/detail/zhaohaixin0418/9672039

body：

<body>
<div ng-controller='PostListController'>
   <div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance='1'>
      <div ng-repeat='item in demo.items'>
         <p>
	     <label>{{item.fk}}</label>
         </p>
      </div>
      <div ng-show='demo.busy'>Loading data...</div>
   </div>
</div>
</body>

虽然我们引用了 ng-infinite-scroll.js，但是我们还得创建后台数据交互的工厂，所以还得再页面里写一段js：（这里的这段js可以用ng1新的写法来写，我测试过，两种写法都可以。）

<script>
   var ftitAppModule = angular.module('haixin', ['infinite-scroll']);
   ftitAppModule.controller('PostListController',
         function ($scope, Demo) {
            $scope.demo = new Demo();
         });
   ftitAppModule.factory('Demo', function ($http) {
      var Demo = function () {
         this.items = [];
         this.busy = false;
         this.after = '';
         this.page = 0;
      };
      Demo.prototype.nextPage = function () {
         if (this.busy) return;
         this.busy = true;
         var url = "http://127.0.0.1:8080/club/login";//这里是后台数据接口
         $http.post(url).success(function (data) {
            var items = data;
            for (var i = 0; i < items.length; i++) {
               this.items.push(items[i]);
            }
            this.after = "abc" + this.items[this.items.length - 1].id;
            this.busy = false;
            this.page += 1;
         }.bind(this));
      };
      return Demo;
   });
</script>