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

 更新时间:2016年12月14日 10:18:10   作者:小小小小小亮  
这篇文章主要介绍了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法,结合实例形式分析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>

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

①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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • AngularJS 入门教程之HTML DOM实例详解

    AngularJS 入门教程之HTML DOM实例详解

    本文主要介绍AngularJS HTML DOM,这里帮大家整理了详细的资料,并附实例代码详细讲解,有需要的小伙伴可以参考下
    2016-07-07
  • AngularJS深入探讨scope,继承结构,事件系统和生命周期

    AngularJS深入探讨scope,继承结构,事件系统和生命周期

    这篇文章主要介绍了AngularJS的scope,继承结构,事件系统和生命周期,较为详细的分析了scope的作用域、层次结构、继承及生命周期相关概念与使用技巧,需要的朋友可以参考下
    2016-11-11
  • Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • Angular4学习教程之HTML属性绑定的方法

    Angular4学习教程之HTML属性绑定的方法

    这篇文章主要给大家介绍了关于Angular4学习教程之HTML属性绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • Angular6使用forRoot() 注册单一实例服务问题

    Angular6使用forRoot() 注册单一实例服务问题

    这篇文章主要介绍了Angular6使用forRoot() 注册单一实例服务问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • AngularJS前端页面操作之用户修改密码功能示例

    AngularJS前端页面操作之用户修改密码功能示例

    这篇文章主要介绍了AngularJS前端页面操作之用户修改密码功能,结合具体实例形式分析了AngularJS针对前端用户修改密码的判断操作实现技巧,需要的朋友可以参考下
    2017-03-03
  • 详解Webstorm 下的Angular2.0开发之路(图文)

    详解Webstorm 下的Angular2.0开发之路(图文)

    这篇文章主要介绍了详解Webstorm 下的Angular2.0开发之路(图文) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 简单谈谈关于Angular Cli打包的事

    简单谈谈关于Angular Cli打包的事

    使用过angular2人都应该知道,angular2提供的Angular CLI来快速搭建,快速生成serives、component、derective、modulet各种模板...下面这篇文章主要给大家介绍了关于Angular Cli打包的一些事,需要的朋友可以参考下。
    2017-09-09
  • AngularJs Understanding the Model Component

    AngularJs Understanding the Model Component

    本文主要介绍AngularJs Understanding the Model Component的内容,这里整理了相关资料,并详细讲解了这部分知识,有兴趣的小伙伴可以参考下
    2016-09-09
  • 解决ionic和angular上拉加载的问题

    解决ionic和angular上拉加载的问题

    这篇文章主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下
    2017-08-08

最新评论