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 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
JavaScript闭包的简单应用
Sep 01 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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的输出:缓存并压缩动态页面
2013/06/11 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
js实现简单计算器
2015/11/22 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python for循环与range函数的使用详解
2019/03/23 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python实现像awk一样分割字符串
2020/09/15 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
临床医学专业求职信
2014/08/08 职场文书
离婚协议书标准格式
2014/10/04 职场文书
加入学生会自荐书
2015/03/05 职场文书
超强台风观后感
2015/06/09 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
Python极值整数的边界探讨分析
2021/09/15 Python