ngInfiniteScroll —— AngularJS 的无限滚动

ngInfiniteScroll 是一个 AngularJS 的扩展指令,实现了网页的无限滚动的功能,也就是相当于页面滚动到最底部的时候自动加载更多内容。

https://yqfile.alicdn.com/8d323afd5b12a4d13a2abe16173f576fc046686a.png
" >

使用方法:

  1. 引入 JS 库
<script type='text/javascript' src='path/to/jquery.min.js'></script>
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
  1. 加载模块
angular.module('myApplication', ['infinite-scroll']);
  1. 定义要实现滚动的元素
<div infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"></div>

然后实现 myPagingFunction() 函数即可。

文章转载自 开源中国社区 [http://www.oschina.net]

时间: 2024-08-21 16:51:23

ngInfiniteScroll —— AngularJS 的无限滚动的相关文章

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

本文实例讲述了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法.分享给大家供大家参考,具体如下: 1.分页加载数据的基础上,如何通过滚动加载,实现分页加载数据的效果,github上,针对AngularJS,有一款不错的插件,地址为:https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档 (1)使用样例: <ANY infinite-scroll='{expression}' [infinite-scroll-di

无限滚动翻页的优点和缺点

  什么是无限滚动翻页?你一定不会陌生.实在不清楚,刷一下微博就知道了.想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨论得比较火的一个话题.我们说的无限滚动翻页是网页中一种新的导航类型,当你鼠标滑到页面底部的时候,页面会自动加载新的内容.生活中我们经常用到的微博.QQ空间里还有国外的Twitter.Pinterest都有运用到无限滚动翻页. 任何技术或趋势的出现都会有各自的优缺点,无限滚动翻页也不例外.而且无论是它的优点还是缺点,都有充足的理由来支

“无限滚动加载”适用于你的产品吗?

在家一天天宅着,倒仍然能对周六周日有清晰的概念,也真是个奇迹. 今天带来一篇关于无限滚动加载的简短译文.其实这事儿,以前在微博上也吐过一阵的槽,印象最深的就是有次在一个什么网站上想点页脚里的"关于我们",真心点不着,每每要点的时候上面自动加载的内容就顶下来,没完没了...当时就愤恨的琢磨着你们要这页脚有毛用啊?这次看到这篇文章,觉得里面有不少能引起自己共鸣的内容,所以拿过来做,希望也能给各位朋友带来些有用的东西吧.走着. 这里进入译文.怎样通过更友好的方式来呈现一系列的数据内容,包括文

响应式的无限滚动全屏dribbble作品集布局展示效果

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 来源:GBin1.com 在线演示和下载 大家还记得前面分享过的两个魔术布局效果吧: 响应式的dribbble作品集魔术布局展示效果 宽度自适应缩进的响应式dribbble作品集魔术布局展示效果 今天分享一个使用jQuery sly插件构建的全屏响应式布局布局效果,支持无限滚动. 相关插件: Jribbble :一个帮助你方便调用dribbb

【干货】设计高性能无限滚动加载,了解高效页面秘密

UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加载的设计实践. 无限滚动加载在互联网上到处都有应用: 豆瓣首页是一个,Facebook的Timeline是一个,Tweeter的话题列表也是一个.当你向下滚动,新的内容就神奇的"无中生有"了.这是一个得到广泛赞扬的用户体验. 无限滚动加载背后的技术挑战其实比想象中要多不少.尤其是要考虑页面性能,需要做到极致. 本文通过代码实例,来实现一个无限滚

IOS中无限滚动Scrollview效果_IOS

本文实例讲了IOS无限滚动效果,分享给大家供大家参考,具体内容如下 滑动到当前位置时候才去请求,本地有内容则直接显示(以来SDWebImage,UIView+Ext) HZScrollView.h #import <UIKit/UIKit.h> typedef void(^HZReturnBlock)(NSInteger index,CGFloat offset); typedef NS_ENUM(NSUInteger, HZScrollViewPageControllPosition) {

iOS利用UIScrollView实现无限滚动效果_IOS

前言 众所周知UIScrollView 的无限滚动主要应用在图片轮播器.欢迎界面等场景.它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象.网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究. 实现步骤       1.根据需求准备几张图片,在网上找了5张图片,分别命

iOScollectionView广告无限滚动实例(Swift实现)_IOS

今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: 1. 在你需要放置无限滚动展示数据的地方把他的数据,在原本的基础上把你要展示的数据扩大三倍.(当然扩大两倍也是可以的,三倍的话,比较好演示) // MARK: - 设置数据源 func collectionView(_ collectionView: UICollectionView, number

基于jquery瀑布流插件实现相册无限滚动

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的"哇哦" 等等.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.所以,我们给这样的布局起了一个形象的名字 - 瀑布流式布局. Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐.漂亮! 官网插件下载地址以及详解地址: http://ma