使用的是ion-infinite-scroll 标签:核心代码附上:

HTML:

<ion-content style="background-color: #fff">
<p style="text-align: center;">
      <ion-infinite-scroll
            icon="ion-loading-a"
            ng-if="!isMax&&list.length!=0"
            distance="5%"
            immediate-check="true"
            on-infinite="loadData();">
    </ion-infinite-scroll>
</p>
</ion-content>

<ion-infinite-scroll></ion-infinite-scroll>中的属性解释:

icon是刷新icon样式,ng-if是判断是否去刷新的条件,distance是上拉多少个百分比开始加载,on-infinite是加载的方法


Controller:

//提现记录页面:下拉刷新,上拉加载
$scope.pageSize = 10;    //首先渲染一页显示几行
$scope.currentPage = 1;  //默认首先是第一页
$scope.isMax = false;   //默认有第二页
$scope.list = [];        //数组为空
$scope.dataLoading = false;
$scope.isShowLoading = true;

//提现记录页面跳转
$scope.cashRecord = function () {
     $state.go('func', {
          module: 'getCash',
          func: 'record'
      });
};
 //加载方法:
$scope.loadData = function () {
      if ($scope.isMax) {
          console.log("没有更多数据了!");
          $scope.$broadcast('scroll.infiniteScrollComplete');
           return;
     }
      if ($scope.dataLoading) {
             console.log("当前正在载入中不能重复载入!");
             $scope.$broadcast('scroll.infiniteScrollComplete');
              return;
       }
       if ($scope.isShowLoading) {
              $scope.showLoading();
              $scope.isShowLoading = false;
       }
        $scope.dataLoading = true;
        DealHistoryService.getIncomeList({
              currentPage: $scope.currentPage++,
              pageSize: $scope.pageSize
       }).then(
            function (result) {
                 $scope.hideLoading();
                 $scope.$broadcast('scroll.infiniteScrollComplete');
                  console.log('wrwr提现记录',JSON.stringify(result));
                  if (result.resCode == '0000' && result.data != null) {                          
                        $scope.list = $scope.list.concat(result.data.contractList);  //已经有了第一页的十条数据
                        if (result.data.contractList.length < $scope.pageSize) {
                             $scope.isMax = true;
                     }
                      console.log('是否hasMore', $scope.hasMore);
             }else {
                    $scope.alert(result.resMsg, "数据获取错误");                         
             }
              $scope.dataLoading = false;
     },
     function (error) {
          $scope.hideLoading();          
          console.log(error);
           $scope.showToast("数据传输错误,请检查您的网络连接");
          $scope.dataLoading = false;
          }
     )
 };
$scope.$on('$stateChangeSuccess', function () {
       $scope.loadData();
 });


Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐