在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载，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>
分享到：
相关推荐
本文介绍如何使用AngularJS结合第三方控件ngInfiniteScroll来实现页面滚动到底部自动加载数据的功能。首先，需要下载ngInfiniteScroll组件，并在项目中引入必要的JavaScript库，包括jQuery、AngularJS以及...
这些插件通常通过监听滚动事件或提供分页控件来实现分页，并且可以动态加载数据，避免一次性加载大量数据导致页面卡顿。 在AngularJS中，实现动态更新页号和页码通常涉及在服务中管理数据状态，比如`$http`服务获取...
功能说明： 环境说明： 开发软件：VS 2017 （版本2017以上即可，不能低于2017） 数据库：SqlServer2008r2（数据库版本无限制，都可以导入） 开发模式：mvc。。。
labview程序代码参考学习使用，希望对你有所帮助。
大米外贸商城系统 简称damishop 完全开源版，只需做一种语言一键开启全球133中语言自动翻译功能，价格实现自动汇率转换,集成微信支付宝 paypal以及国外主流支付方式，自带文章博客系统。 软件架构 基于MVC+语言包模式,增加控制台，API导入产品方便对接其他系统（带json示例数据）。 使用要求 PHP7.4+ MYSQL5.6+ REDIS(可选) 安装方法 composer install 打开安装向导安装 http://您的域名/install 特色 1、缓存层增加时间与批量like删除 2、API产品导入方便对接其他系统 3、增加控制台命令行，命令行生成语言翻译包 4、后台一键开启自动翻译模式，支持全球133中语言，由于google代理翻译需要收费，这个功能需要付费。 5、可选购物车与ajax修改购物车产品 6、一键结算checkout 7、增加网站前台自定义路由 方便seo 更新日志 v3.9.7 集成鱼码支付接口，方便个人站长即使收款到账使用 v3.9.3 更新内容 1:增加ueditor与旧编辑器切换 2:增加可视化布局插
labview程序代码参考学习使用，希望对你有所帮助。
labview程序代码参考学习使用，希望对你有所帮助。
毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频