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

最新推荐文章于 2022-07-22 10:50:27 发布

原创最新推荐文章于 2022-07-22 10:50:27 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

Ionic 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Ionic应用中利用ion-infinite-scroll组件实现上拉加载和下拉刷新功能。通过HTML和Controller的核心代码示例，详细解释了ion-infinite-scroll的用法，包括设置刷新图标、触发条件和加载距离等关键配置。

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