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

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

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

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

先定义几个值：

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

获取到数据$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");
    }
});