当前位置：首页 > 资讯 > 技术文档

AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

时间：2020-08-15 23:09 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

本文实例讲述了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法。分享给大家供大家参考，具体如下： 1.分页加载数据的基础上，如何通过滚动加载，实现分页加载数据的效果，github上，针对AngularJS，有一款不错的插件，地址为：https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档（1）使用样例：

<ANY infinite-scroll='{expression}'
   [infinite-scroll-distance='{number}']
   [infinite-scroll-disabled='{boolean}']
   [infinite-scroll-immediate-check='{boolean}']
   [infinite-scroll-listen-for-event='{string}']>
</ANY>

[b]解释各个属性（指令的含义）[/b] ①infinite-scroll - {expression} 当滚动到浏览器底部时，所执行的函数或者表达式，通常是函数形式。 ②infinite-scroll-distance (optional) - {number} 表达式或者数字，如果是一个数字，表示滚动条距离浏览器底部多少远时，执行①中里面的函数。如果将这个值设置为2，对于1000px高度的元素，当元素底部距离浏览器窗口底部距离在2000px像素以内，没滚动一次，都会执行一次①里面的函数。（这个值默认是0，即当元素滚动到元素底部达到浏览器窗口（滚动区域）底部时，执行滚动区域里面的函数。 ③infinite-scroll-disabled (optional) - {boolean} 一个布尔值，用于标志滚动表达函数能否执行，如果值为true，表示滚动函数不能被执行。这个属性，通常用于暂停或者停止滚动。比如当我们在AJAX请求数据的过程中，移动了滚动条，这时就需要设置这个属性，禁止滚动函数的执行。 ④infinite-scroll-immediate-check (optional) - {boolean} 一个布尔值，用于标志指令在初始化页面时，是否为初始执行一次（即使这种情况下，没有初始滚动），默认值为true，表示初始会执行一次这①里面的函数。 ⑤infinite-scroll-listen-for-event (optional) - {string} 一个事件，当接受到这个事件时候，会重新执行滚动函数，重新定位滚动位置，比如到元素被修改时，会重新执行滚动函数。（2）本地的DEMO 官网给出了本地运行，实现滚动加载的例子： HTML代码：

<div ng-app='myApp' ng-controller='DemoController'>
 <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
  <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
 </div>
</div>

JS代码：

var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
 $scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
 $scope.loadMore = function() {
  var last = $scope.images[$scope.images.length - 1];
  for(var i = 1; i <= 8; i++) {
   $scope.images.push(last + i);
  }
 };
});

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/893.htm]AngularJS入门与进阶教程[/url]》及《[url=http://www.1sucai.cn/Special/898.htm]AngularJS MVC架构总结[/url]》希望本文所述对大家AngularJS程序设计有所帮助。

全部评论(0)

上一篇：Angular指令之restict匹配模式的详解
下一篇：浅谈对Angular中的生命周期钩子的理解

资讯排行榜
更多>>