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 相关文章推荐
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
php之可变变量的实例详解
2017/09/12 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
浅谈python字符串方法的简单使用
2016/07/18 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python3 中文文件读写方法
2018/01/23 Python
Python的多维空数组赋值方法
2018/04/13 Python
python中map的基本用法示例
2018/09/10 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
如何写好升职自荐信
2014/01/06 职场文书
简单租房协议书
2014/04/09 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
关于python爬虫应用urllib库作用分析
2021/09/04 Python