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


Posted in Javascript onDecember 14, 2016

本文实例讲述了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>

解释各个属性(指令的含义)

①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程序设计有所帮助。

Javascript 相关文章推荐
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 #Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 #Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 #Javascript
bootstrap模态框实现拖拽效果
Dec 14 #Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 #Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 #Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 #Javascript
You might like
php session处理的定制
2009/03/16 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
让您的菜单不离网站
2006/10/03 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
java直接调用python脚本的例子
2014/02/16 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python中标准模块importlib详解
2017/04/16 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python自动登录QQ的实现示例
2020/08/28 Python
python温度转换华氏温度实现代码
2020/12/06 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
护士毕业实习感言
2014/03/05 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
三方协议书范本
2014/04/22 职场文书
董事长秘书工作职责
2014/06/10 职场文书