`

AngularJS 无限滚动加载数据控件 ngInfiniteScroll

阅读更多
在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js和jquery实现都不复杂都是既然AngularJS提供现成的我们怎么不用昵。
ng-infinite-scroll.js这个组件则可以实现:
ng-infinite-scroll.js:下载地址:http://sroze.github.io/ngInfiniteScroll/
使用:
<!DOCTYPE html>
<html ng-app="lxApp" ng-controller="lxCtrl">
  <head>
    <title>柳絮飞祭奠</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
  	<div style="height: 700px;"></div>
  	<div infinite-scroll="mouse_scroller()">
  		<div ng-repeat="item in show"></div>
  	</div>
  </body>
  <script type="text/javascript" src="../plugins/angular/angular.js"></script>
  <script type="text/javascript" src="../plugins/angular/ng-infinite-scroll.js"></script>
  <script type="text/javascript">
  	var lxApp=angular.module("lxApp",['infinite-scroll']);
  	lxApp.controller("lxCtrl",function($scope){
  		$scope.mouse_scroller=function(){
                   //每次滚动到浏览器底部都会触发这个方法这里写你的加载数据业务。
  		};
  	});
  </script>
</html>
0
0
分享到:
评论

相关推荐

    基于PathView,Qt/QML做的一个可以无限滚动的日历控件

    基于PathView,Qt/QML做的一个可以无限滚动的日历控件 基于PathView,Qt/QML做的一个可以无限滚动的日历控件 基于PathView,Qt/QML做的一个可以无限滚动的日历控件 基于PathView,Qt/QML做的一个可以无限滚动的...

    angularjs与openlayers3自定义控件

    通过AngularJS,你可以轻松地将这个控件与应用的其他部分连接起来,实现数据和状态的同步。 总的来说,结合AngularJS和OpenLayers 3可以带来更高效、更灵活的Web地图应用开发体验。通过自定义指令,我们可以将复杂...

    C# Winform进度条 数据加载等待控件

    "C# Winform进度条 数据加载等待控件"就是这样一个组件,它在数据加载或执行耗时操作时提供视觉反馈,告诉用户程序仍在运行,并且预计何时会完成。 这个控件的设计原则是简单易用,开发者只需一行代码就能快速地将...

    angularjs下拉树控件

    总结一下,AngularJS中的下拉树控件需要结合自定义指令、数据模型、模板渲染和控制器逻辑来实现。通过熟练掌握这些概念,你可以为你的应用程序创造出高效且用户友好的下拉树组件,提供层次分明的选项供用户选择。

    AngularJS的tree控件

    AngularJS的Tree控件是一种在Web应用中展示层次结构数据的有效方式。AngularJS,作为一款强大的前端JavaScript框架,提供了一种灵活的方式来构建动态、数据驱动的用户界面。在这个主题中,我们将深入探讨如何使用...

    基于AngularJS实现页面滚动到底自动加载数据的功能

    本文介绍如何使用AngularJS结合第三方控件ngInfiniteScroll来实现页面滚动到底部自动加载数据的功能。首先,需要下载ngInfiniteScroll组件,并在项目中引入必要的JavaScript库,包括jQuery、AngularJS以及...

    GridView滚动到底部加载更多数据

    在一些需要无限滚动或者“下拉加载更多”功能的应用场景中,GridView可以通过添加特定的逻辑来实现这一效果。下面将详细讲解如何实现"GridView滚动到底部加载更多数据"的功能。 首先,我们需要理解这个功能的基本...

    angularjs ui-grid datepicker 日期控件

    在AngularJS开发中,UI-Grid是一个非常强大的数据网格组件,它允许开发者以灵活和高效的方式展示和操作表格数据。而“angularjs ui-grid datepicker”则是UI-Grid的一个扩展功能,它为表格中的日期字段提供了集成的...

    iOS 自定义无限循环滚动广告动画控件

    2. **视图控制器**:创建一个专门的视图控制器来管理这个广告视图,确保它能正确加载数据并处理滚动事件。视图控制器应该遵循相关的协议(如UICollectionViewDataSource和UICollectionViewDelegate)。 3. **布局**...

    angularjs实现的前端分页控件示例

    在AngularJS中实现分页控件,可以提高用户界面的可用性和数据展示效率。 首先,要了解AngularJS中指令(directives)的概念。指令是AngularJS的基础组成部分,可以用来扩展HTML的标签,创建自定义的HTML元素或属性...

    wpf加载中控件

    在WPF(Windows Presentation Foundation)中,加载中控件通常是指在应用程序或数据加载时显示的一种视觉指示器,以告知用户程序正在运行并处理请求。这些控件通常以动画形式出现,比如旋转的加载图标或者进度条,为...

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    这正是我们实现滚动加载数据的关键。 在ASP.NET中,我们可以使用UpdatePanel控件来模拟AJAX行为,但这种方法可能会导致性能问题。因此,更推荐使用jQuery的Ajax方法(如$.ajax或$.getJSON)来实现定制的异步请求。 ...

    ANGULARJS中使用JQUERY分页控件

    接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法。  首先在web项目中引用jquery1.10、Angularjs库文件以及jq-pagination控件。  我降指令名称为custompagination,为指令添加Html样式。    ...

    angularjs 时间控件指令,

    angularjs 时间控件指令,依赖 datepicker ,地址:zui.sexy

    Angularjs中使用layDate日期控件示例

    后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件。 解决思路:将layDate的初始化及相关代码定义在指令里。 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值...

    列表无限滚动加载库

    在Android开发中,列表无限滚动加载库是一种常见且实用的技术,它使得用户可以在滚动到列表底部时自动加载更多数据,提供了更好的用户体验。本案例聚焦于一个名为“mugen”的源码库,它专为此目的而设计,适用于...

    安卓上拉加载的控件.zip

    这种功能在无限滚动列表或者分页加载内容的应用中非常常见,比如社交媒体、新闻阅读应用等。本资源"安卓上拉加载的控件.zip"包含了一个名为"pullToRefreshlibrary"的项目,这很可能是一个自定义的Android库,用于...

    VB树形控件加载无限层.rar

    综上所述,"VB树形控件加载无限层.rar"提供的代码示例旨在帮助开发者理解如何在VB环境中动态地、无限层次地加载数据到树形控件中,同时提供了优化用户体验和性能的思路。通过学习和实践这个示例,你可以掌握在VB中...

Global site tag (gtag.js) - Google Analytics