angular.js+ionic上拉加载下拉刷新

页面效果

1.下拉刷新
使用ion-refresher,pulling-text下拉时的文本，refreshing-text刷新时的提示文本，on-refresh刷新方法。

<ion-refresher pulling-text="下拉刷新" refreshing-text="刷新中..." on-refresh="doRefresh()"></ion-refresher>

2.上拉加载
使用ion-infinite-scroll,can_loadmore判断是否有数据（没数据了，隐藏组件），loadMore()加载数据方法，distance开始加载时离底部的距离。

 <ion-infinite-scroll
         ng-if="can_loadmore"
         on-infinite="loadMore()"
         distance='1%'>  
 </ion-infinite-scroll>

3.页面代码

<ion-view view-title="" hide-nav-bar="true" hide-tabs ng-controller="insuranceConceptController">
    <ion-header-bar class="bar el-common-title product-center-title" align-title="center" header-height>
        <a class="button button-clear el-common-icon icon ion-ios-arrow-back" onclick="history.back()"></a>
        <h1 class="title el-common-text">保险理念</h1>
    </ion-header-bar>
    <ion-content class="content has-header ionic-pseudo">
            <ion-refresher pulling-text="下拉刷新" refreshing-text="刷新中..." on-refresh="doRefresh()"></ion-refresher>
            <div class="list card" ng-repeat="msg in listXXXX" ng-click="toInsuranceConceptDetail(msg.age)">
                <div class="item">
					<span style="font-size: 16px">
					{{msg.title}}
					</span>
                </div>
                <div class="item item-image">
                    <img src="{{msg.img}}" style="height: 150px">
                </div>
                <span class="item" style="font-size: 14px;color: #d0d0d0">
					<span>{{msg.time}}</span>
					<span style="float: right;">查看详情
						<i style="margin-left: 6px;" class="icon ion-chevron-right"></i>
					</span>
				</span>
            </div>
        <ion-infinite-scroll
                ng-if="can_loadmore"
                on-infinite="loadMore()"
                distance='1%'>
        </ion-infinite-scroll>

    </ion-content>
</ion-view>

4.部分js代码

  $scope.listXXXX = [
            {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
            {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
            {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
            {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
            {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"}
            ];
        var page_no = 1;
        $scope.can_loadmore = true;


        $scope.doRefresh = function () {
            page_no = 1;
            $scope.$broadcast('scroll.refreshComplete');
        };

        $scope.loadMore = function () {
            page_no++;
            if (page_no === 10) {
                $scope.can_loadmore = false;
                $scope.$broadcast('scroll.infiniteScrollComplete');
            } else {
                var newData = [
                    {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
                    {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
                    {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
                    {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"},
                    {"title": "简单了解保险理念", img: "https://p2.piqsels.com/preview/680/431/623/boy-child-kid-family.jpg",time:"2019-10-12"}
                ];
                setTimeout(function () {
                   $scope.listXXXX = $scope.listXXXX.concat(newData);
                   $scope.$broadcast('scroll.infiniteScrollComplete');
               },1000)
            }

        };