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模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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
自己做矿石收音机
2021/03/02 无线电
杏林同学录(三)
2006/10/09 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python基础教程之常用运算符
2014/08/29 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python安装pil库方法及代码
2019/06/25 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
宣传部部长竞选演讲稿
2014/04/26 职场文书
档案保密承诺书
2014/06/03 职场文书
授权委托书样本
2014/09/25 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
大学生活感想
2015/08/10 职场文书
趣味运动会标语口号
2015/12/26 职场文书
nginx静态资源的服务器配置方法
2022/07/07 Servers