移动端 上拉加载更多

eg：

图片.png

说明：数据过多时移动端使用加载更多方式进行分页，当滚动到页面底部时出现“加载中”提示，然后加载下一页内容。
实现过程：列表底部放置无限加载组件（以ionic-ui框架为例,js框架为angular） ,触发滚动事件时请求下一页数据；每页请求数量limit * 单条数据渲染高度 >= 页面高度，否则会在下拉之前出现“加载中”
注意：无限加载组件带提示文字，当内容不满一页时，不能显示；控制高度及组件属性，防止自动触发加载，连续请求。

代码：
Dom包含框架外层content，数据列表渲染及无限加载组件

<ion-content delegate-handle="listScroll">
   <ul >
    <li ng-repeat="item in listData">{{item.name}}</li>
  </ul>
  <ion-infinite-scroll immediate-check="false" icon="download-na"  
on-infinite="loadMore()" distance="5%" ng-if="showMore" ></ion-infinite-scroll>  
 </ion-content>

js逻辑主要处理数据获取（包括加载更多）、控制组件显示

function:getListData(){
    var me = this, scope = me.el.scope();
    var obj={
      start:scope.requestObj.start,
      limit:scope.requestObj.limit,
        //  …
    };
  //请求接口获取数据
  ajaxGetData(obj).then(function(res){    
    scope.listData = scope.requestObj.start?scope.listData.concat(res.data):res.data;
    scope.showMore = res.data.length >= scope.requestObj.limit;
    scope.requestObj.start + = scope.requestObj.limit;
    
    //
  //  !!scope.requestObj.start && $scope.$broadcast('scroll.refreshComplete');  //上拉加载触发下拉刷新
    !!scope.requestObj.start && $scope.$broadcast('scroll.infiniteScrollComplete');
  });
}