前端实现下拉显示更多功能

说明：项目由angular+require搭建。
项目中遇到下拉页面加载更多内容效果，网站中已上线页面中已有相同效果，参照老司机代码，学习并总结此篇（不一定是最简洁最优化的方法，抛砖引玉，欢迎读者朋友推荐更多更好的思路方法）。
以下总结的下拉加载更多功能，是通过前端代码完成的，也就是从接口获取数据是一次性获取到所有数据，然后通过前端代码处理，来实现下拉加载更多的功能。

从接口获取到数据后，比如数据为：

$scope.dataList = [//假设其中有n多个对象，由此数据处理为当前页面需要显示的数据，然后根据显示数据循环渲染到页面一个个排列的页面元素内容
];

先定义几个值：

$scope.maxShowNum=10;  //每次下拉多显示的数据条数
$scope.curPage=1;   //当前页数：可以把每次下拉一次，相当于翻页一次
$scope.showList=[];
$scope.showMoreDomDev=true;
$scope.showMax=10;

获取到数据scope.dataList后，定义一个方法来将所有数据处理为页面当前需要显示的数据scope.dataList后，定义一个方法来将所有数据处理为页面当前需要显示的数据 scope.showDataList：

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");}
});

前端实现下拉显示更多功能相关推荐

vue实现select下拉显示隐藏功能【详细功能拓展】
ajax实现下拉列表回显,layui实现下拉复选功能的例子(包括数据的回显与上传)
一.layui下拉复选实现的背景:实现一个管理员拥有多个权限二. 具体实现: //依赖资源 //页面显示角色: xm-select-search xm-select-skin="defa ...
layui 实现下拉多选功能 [xm-select]
背景近期负责的管理后台,有下拉多选的业务需求通过网上的经验搜索,发现 xm-select 是个非常不错的选择并且,当前的后台使用的正是 layui 前端框架所以,在此整理一下对下拉多选功能 ...
html 下拉框搜索,下拉框搜索功能的实现
下拉框搜索功能的实现. 首先我们先做一个下拉框会员等级不限会员尊享会员搜索写入按钮触发事件,loadAjax方法事先已经封装好在pagingJs.js里面. pagingJs.js: va ...
refreshcontrol 实现下拉刷新的功能
该组件实现下拉刷新的功能.不过该组件是用在ScrollView的内部的,为ScrollView添加一个下拉刷新的功能.当ScrollView的垂直方向的偏移量scrollY:0的时候,手指往下拖拽Sc ...
利用vue实现“显示更多”功能
利用vue实现"显示更多"功能当网页内容比较多时,将内容全部显示一方面会显得冗余,另一方面并不是每个人都喜欢看所有内容.因此,为了提高用户体验,一些网站便将内容显示一部分,然后使 ...
ios 上滑隐藏导航下拉显示导航栏实现
为了最大限度的利用手机屏幕,出现了上滑隐藏导航下拉显示导航栏. 先看看效果(代码:http://download.csdn.net/detail/gx_wqm/9771247), 把代码跑一下看一下是 ...
Android仿微信首页下拉显示小程序列表
花点时间重新熟悉一下AndroidUI方面的东西,把古董PullToRefreshView又撸了一遍,技术这种东西真是忘得快啊...在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式 ...
vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
目录案例1 源码如下效果如下案例2 源码如下效果如下最后案例1 源码如下 navBar内容,上拉显示navBar,下拉隐藏navBar,固定在顶部,样式切换 <template> ...

前端实现下拉显示更多功能

前端实现下拉显示更多功能相关推荐

最新文章

热门文章