Chinaunix首页 | 论坛 | 博客
  • 博客访问: 112525
  • 博文数量: 40
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 423
  • 用 户 组: 普通用户
  • 注册时间: 2013-01-15 11:55
文章分类

全部博文(40)

文章存档

2016年(36)

2015年(2)

2013年(2)

我的朋友

分类: JavaScript

2016-03-17 16:09:14

在移动端已经不需要点击页码换页了,而是通过手触滑动,滑动到底部自动加载,这个demo是项目中写的一个例子,之总结了js部分,贴出代码分享,此功能依赖于infinite- 

点击(此处)折叠或打开

  1. (function() {
  2.     
  3.     var myApp = angular.module('myApp', ['infinite-scroll']);

  4.     myApp.controller('DemoController', function($scope, Reddit) {
  5.      $scope.reddit = new Reddit();
  6.      console.log("hello");
  7.     });

  8.     // Reddit constructor function to encapsulate HTTP and pagination logic
  9.     myApp.factory('Reddit', function($http) {
  10.      var Reddit = function() {
  11.         this.items = [];
  12.         this.busy = false;
  13.         this.page = 1;
  14.      };

  15.      Reddit.prototype.nextPage = function() {
  16.         if (this.busy) return;
  17.         this.busy = true;

  18.         var url = "" + this.page ;
  19.         $http.get(url).success(function(data) {
  20.          var items = data.items;
  21.          for (var i = 0; i < items.length; i++) {
  22.             this.items.push(items[i]);
  23.          }
  24.          this.page = data.page + 1 ;//第几页
  25.          this.busy = false;
  26.         }.bind(this));
  27.         
  28.      };

  29.      return Reddit;
  30.     });
  31. })()
json代码

点击(此处)折叠或打开

  1. {
  2.   "success":true,
  3.   "page":1,
  4.   "items":[
  5.   {
  6.     "id":1,
  7.     "author":"张三",
  8.     "title":"hello world 1",
  9.     "url":"",
  10.     "content":"abcd efg hijk lmn opq rst uvw xyz.....1"
  11.   },
  12.   {
  13.     "id":2,
  14.     "author":"李四",
  15.     "title":"hello world 2",
  16.     "url":"",
  17.     "content":"abcd efg hijk lmn opq rst uvw xyz.....2"
  18.   },
  19.   {
  20.     "id":1,
  21.     "author":"王五",
  22.     "title":"hello world 3",
  23.     "url":"",
  24.     "content":"abcd efg hijk lmn opq rst uvw xyz.....3"
  25.   },
  26.   {
  27.     "id":1,
  28.     "author":"张三1",
  29.     "title":"hello world 1",
  30.     "url":"",
  31.     "content":"abcd efg hijk lmn opq rst uvw xyz.....1"
  32.   },
  33.   {
  34.     "id":2,
  35.     "author":"李四1",
  36.     "title":"hello world 2",
  37.     "url":"",
  38.     "content":"abcd efg hijk lmn opq rst uvw xyz.....2"
  39.   },
  40.   {
  41.     "id":1,
  42.     "author":"王五1",
  43.     "title":"hello world 3",
  44.     "url":"",
  45.     "content":"abcd efg hijk lmn opq rst uvw xyz.....3"
  46.   },
  47.   {
  48.     "id":1,
  49.     "author":"张三2",
  50.     "title":"hello world 1",
  51.     "url":"",
  52.     "content":"abcd efg hijk lmn opq rst uvw xyz.....1"
  53.   },
  54.   {
  55.     "id":2,
  56.     "author":"李四2",
  57.     "title":"hello world 2",
  58.     "url":"",
  59.     "content":"abcd efg hijk lmn opq rst uvw xyz.....2"
  60.   },
  61.   {
  62.     "id":1,
  63.     "author":"王五2",
  64.     "title":"hello world 3",
  65.     "url":"",
  66.     "content":"abcd efg hijk lmn opq rst uvw xyz.....3"
  67.   }
  68.  ]
  69. }

阅读(1140) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~