Ionic之如何使用ion-infinite-scroll实现上拉加载，下拉刷新的功能

来源：互联网发布：mac 新系统打不开u盘编辑：程序博客网时间：2024/05/18 01:24

使用的是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(); });

阅读全文

1 0