ionic下拉刷新上拉加载

1、下拉刷新
html

<!--写在页面顶部-->
<ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()"></ion-refresher>

controller.js

$scope.doRefresh = function (){
    getComment.then(function(res){  //请求新数据
      if(res.result=="success") {
        $scope.allComment = res.data;  //数据更新操作
        $scope.$broadcast('scroll.refreshComplete');  //记得加上这段
      }
    })
  }

2、上拉加载
html

<!--写在页面底部-->
<ion-infinite-scroll on-infinite="loadMore()" ng-if="hasmore" distance="1%"></ion-infinite-scroll>
<div style="background-color:#fff;text-align:center" ng-if="!hasmore">没有更多了</div>

controller.js

$scope.hasmore = true;
$scope.loadMore = function() {
    $scope.pageNum ++;
    $http({
        method: 'GET',
        url: '/data/allComment/allComment'+$scope.pageNum+'.json'
    }).then(function successCallback(res) {
            if(res.data.result=="success"){
              if(res.data.data.length!=0){
                res.data.data.forEach(function(item){
                  $scope.allComment.push(item)
                })
                $scope.$broadcast('scroll.infiniteScrollComplete');
              }else{
                $scope.hasmore = false;
                $scope.$broadcast('scroll.infiniteScrollComplete');
              }

            }
        }, function errorCallback(res) {
            // 请求失败执行代码
            $scope.hasmore = false;
            $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  }

记得每次上拉结束都要加上这句

 $scope.$broadcast('scroll.infiniteScrollComplete');
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,804评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • 我是个有超能力的人,一直在躲避一个恶魔的追杀。这个恶魔的能力(癖好)是吃人的脑髓。有一群张牙舞爪的手下。
    拾遗书生阅读 67评论 0 0
  • 30多岁的人了,和别人同样是头顶蓝天,脚踩大地,但看到身边的人买了几套房子了,买好车了,注册公司了,成高管了,去这...
    写作积累阅读 235评论 0 0
  • 我是谁,我在哪儿?
    半咖阅读 237评论 0 0