前端实现下拉显示更多功能
来源:互联网 发布:跨平台app开发 知乎 编辑:程序博客网 时间:2024/06/05 17:10
说明:项目由angular+require搭建。
项目中遇到下拉页面加载更多内容效果,网站中已上线页面中已有相同效果,参照老司机代码,学习并总结此篇(不一定是最简洁最优化的方法,抛砖引玉,欢迎读者朋友推荐更多更好的思路方法)。
以下总结的下拉加载更多功能,是通过前端代码完成的,也就是从接口获取数据是一次性获取到所有数据,然后通过前端代码处理,来实现下拉加载更多的功能。
从接口获取到数据后,比如数据为:
$scope.dataList = [ //假设其中有n多个对象,由此数据处理为当前页面需要显示的数据,然后根据显示数据循环渲染到页面一个个排列的页面元素内容];
先定义几个值:
$scope.maxShowNum=10; //每次下拉多显示的数据条数$scope.curPage=1; //当前页数:可以把每次下拉一次,相当于翻页一次$scope.showList=[]; $scope.showMoreDomDev=true;$scope.showMax=10;
获取到数据
initShowDataList:function(){ //如果数据为空,即没有数据,则当前显示数据也为空,并return掉 if(!$scope.dataList ||!$scope.dataList .length){ $scope.showDataList=[]; return ; } //定义页面当前需要显示的数据 $scope.showDataList 为一个空数组 $scope.showModelList=[]; //定义_len代表当前所有数据总长度;_showTotal代表当前页面总共应该显示的数据条数(页面越下拉显示的越多),它由每次下拉多出现的条数*当前页数得出;_max表示把理论上计算出来的页面当前总共需要显示的数据条数和实际的数据总条数做个比较,取其中较小的一个值;因为每次下拉多显示$scope.maxShowNum条数据后,都有可能已经超出数据总数;这个比较保证不能让需要显示的数据条数超出总条数;_start……等待,这个变量好像没有被用上,暂且把它放在一边。 var _len = $scope.dataList.length, _showTotal=$scope.curPage*$scope.maxShowNum, _max=_showTotal>_len?_len:_showTotal, _start=($scope.curPageDev-1)*$scope.maxShowNumDev;得到当前需要显示的数据条数后,由for循环的方法,把总数据中的需要显示的那些放到$scope.showDataList中: for(var i=0;i<_max;i++){ $scope.showDataList.push($scope.dataList[i]); } $scope.showMax=_max; if(_showTotal>=_len){ $scope.showMoreDom=false; }}
有了这个方法将总数据处理为每次下拉(相当于翻页)后需要显示的数据后,还需要下拉时触发这个方法,当然既然每次下拉相当于翻页,那么就要在当前页数上增加1,也就是:
$scope.showMore=function(){ $scope.curPage++; $scope.initShowDataList();}
怎样在每次下拉时触发?老司机这样处理的:
在html中放了一个隐藏元素,点击隐藏元素时触发上面的方法:
<p ng-click="$scope.showMore()" id="more" style="display: none;">显示更多{{showMaxDev}}</p>
最后就是在页面将要拉到最底部时,模拟隐藏元素被点击,也就是触发它的点击事件了:
$(document).scroll(function(){ if($(document).scrollTop()+100 + window.innerHeight>= $(document).height()) { $("#more").trigger("click"); }});
阅读全文
0 0
- 前端实现下拉显示更多功能
- 下拉显示更多
- Android实现下拉刷新,滑动加载更多的功能
- SwipeRefreshLayout实现下拉刷新、上拉加载更多功能
- 下拉刷新、上拉加载更多功能的实现
- 常见功能--下拉刷新、上拉加载更多效果实现
- Android下拉刷新库,利用viewdraghelper实现,集成了下拉刷新,底部加载更多,数据初始加载显示loading等功能
- layer前端组件实现图片显示功能
- jsp更多功能实现
- 加载更多功能实现
- 加载更多功能实现
- angularjs实现下拉加载更多
- jquery实现下拉展示更多
- MaterialRefreshLayout实现下拉刷新,下拉加载更多
- android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)
- Android实现微博下拉刷新上拉加载更多功能
- android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)
- android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)
- 消息对话框:alert、confirm、prompt
- 三目运算符
- Android 自定义线程池
- 释放资源
- unity优化《三》--将包大小减少到极致
- 前端实现下拉显示更多功能
- 使用Lint工具进行代码分析
- Linux内核中内存管理相关的数据结构
- SQL执行顺序
- 求三个数的最大值(利用三目运算符)
- 大话数据结构读书笔记(5)----图
- java获取扫描枪的数据到数据库
- HDU-5559-Frog and String
- 实验二(顺序表)