AngularJS应用-滚动加载更多数据
来源:互联网 发布:net snmp linux 下载 编辑:程序博客网 时间:2024/05/18 01:09
本例demo是在写仿掘金首页时没能解决的问题。
效果图如下:
问题描述:
我在写仿掘金首页时,写了一个自定义返回顶部指令,内部实现了滚动监听,本想在里面写加载更多数据的代码,对全局变量datas重新赋值,但是在获取全局变量datas时不会获取。
搜索相关资料了解了一下自定义指令中$scope作用域的问题,scope的可取值有false,true,{},写了小 demo对这些基本有了了解,但对于我的问题还是无解。所以这个demo中的滚动监听并没有写到自定义指令里,而是写到了控制器中。
核心文件引入:
-jquery.min.js
-angular.min.js
-bootstrap.min.css
页面布局:
<ul ng-controller="myCtrl"> <li ng-repeat="data in datas"> <article> <p> <span>{{ data.author }}</span><span> · </span> <span>{{ data.datetime }}</span><span> · </span> <span>{{ data.category }} </span> </p> <h4>{{ data.title }}</h4> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-heart"></span> 4 </button> <button type="button" class="btn btn-default btn-xs"> <span class=" glyphicon glyphicon-thumbs-down"></span> 1 </button> </div> <div class="btn-group share" role="group" aria-label="..."> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-share"></span> </button> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-star"></span> </button> </div> </article> </li> </ul>
js文件
数据工厂:
.factory('dataList', ['$http', function($http){ var baseUrl = 'http://127.0.0.1:3000'; return { getData:function(titleName,page){ return $http.get(baseUrl+'/home/'+titleName+"?page="+page); } }}])
控制器:
.controller('myCtrl', ['$scope','dataList', function($scope,dataList){ // 分类名称(调用接口需要的字段) dataList.getData("recommend",0).then(function(res){ $scope.datas = res.data.result; oldData = res.data.result; }); jQuery(window).scroll(function(){ var s = jQuery(window).scrollTop(), h = jQuery(window).height(), documentH = jQuery(document).height(); if(s+h>=documentH){ // loadMore alert("要去加载更多数据"); dataList.getData("recommend",page+1).then(function(res){ // 上一页的数据 //console.log(oldData); // 当前页数据:res.data.result // 所有数据:进行了一个数组拼接 var newData = oldData.concat(res.data.result); $scope.datas = newData; }); } }) }])
阅读全文
0 0
- AngularJS应用-滚动加载更多数据
- JQuery滚动加载更多数据实例
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- 滚动加载更多内容
- 滚动加载更多
- win8 metro 无限滚动加载数据,实现“更多”功能
- ListView滚动到底部自动加载更多数据
- vue 2 滚动条加载更多数据实现
- vue.js监听滚动条加载更多数据
- angularjs实现下拉加载更多
- angularjs实现点击加载更多
- 《AngularJS》-----手机页面滚动条滑动到底端实现加载更多
- AngularJS:实现页面滚动到底自动加载数据的功能
- 滚动加载更多的代码
- 前端项目知识点整理-滚动加载更多
- 加载更多数据
- 集群cluster篇-----3.存储技术与应用 、 iSCSI技术应用 、 udev配置 、 NFS网络文件系统 、 Multipath多路径
- VR项目添加键盘鼠标控制
- Xcode报错:Permission denied
- PHP中使用CURL实现GET和POST请求
- springMVC原理
- AngularJS应用-滚动加载更多数据
- XML基础(1)---语法规范和中文编码
- 关于a标签中内套一个img
- Java内存溢出(OOM)异常完全指南
- SVN:Eclipse删除本地包或者是文件后,同步到SVN上
- Spring Security开发安全的REST服务 视频教程
- UVA_658It's not a Bug, it's a Feature! (二进制+隐式图最短路)
- 数据库查询不到结果集
- POJ 1276.Cash Machine