ionic1上拉刷新，下拉加載，安卓問題解決

在原有項目中開發模塊 Ionic v1.2.4 , AngularJS v1.3.13

注意版本問題，angular即便都是版本1也存在api使用的不一樣

在模板中添加相應的組件

下拉刷新 <ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()"></ion-refresher>
上拉加載 <ion-infinite-scroll ng-if="historyListData.hasmore" on-infinite="loadMore()" immediate-check="false" distance="1%"></ion-infinite-scroll>

html

<ion-view>
    <ion-content>
        <ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()">
        </ion-refresher>
        <ion-list class="list c-tb-historybox">
            <ion-item class="item c-tb-historyList" collection-repeat="item in historyListData.object" ng-click="godetail(item.troubleid)">
                <!--<a ng-href="#/trouble/historyDetail/{{item.troubleid}}">-->
                    <p class="row"><strong class="col col-85 c-title" ng-bind="item.troubletitle"></strong><span class="col c-time" ng-bind="item.reporttime| jsonDate:'MM-dd'"></span></p>
                    <p class="row solve-box">
                        <span class="col col-25" ng-if="item.troublestatus===0">已登記</span>
                        <span class="col col-25" ng-if="item.troublestatus===1">處理中</span>
                        <span class="col col-25" ng-if="item.troublestatus===80">已解決</span>
                        <span class="col col-25" ng-if="item.troublestatus===90">已關閉</span>
                        <!--<span class="col c-solve">處理人：
                            <b ng-if="item.dealperson" ng-bind="item.dealperson"></b>
                            <b ng-if="!item.dealperson">暫未分配</b>
                        </span>-->
                    </p>
                <!--</a>-->
            </ion-item>
        </ion-list>
        <ion-infinite-scroll ng-if="historyListData.hasmore" on-infinite="loadMore()" immediate-check="false" distance="1%">
        </ion-infinite-scroll>
        <div class="nomore" ng-if="!historyListData.hasmore">沒有更多了</div>
    </ion-content>
</ion-view>

在js中添加相事件

//上拉刷新
$scope.doRefresh = function () {
    $scope.historyListData.pageIndex = 0;
    $scope.historyListData.hasmore = true;
    $http.get('/lapp/Trouble/GetMyTroubleList?pageIndex=' + $scope.historyListData.pageIndex + '&pageSize=' + $scope.historyListData.pageSize).success(function (response) {
        if (response.code === '1' && response.list.List.length > 0) {
            $scope.historyListData.object = response.list.List;
            $scope.historyListData.pageIndex++;
            if (response.list.List.length < $scope.historyListData.pageSize) {
                $scope.historyListData.hasmore = false;
            }
        } else {
            $scope.historyListData.hasmore = false;
        }
        $scope.$broadcast('scroll.refreshComplete');
    }).error(function (response) {
        $scope.alert('網絡不給力，請檢查網絡設置');
        self.location = "vipoa://close";
    });
};

//下拉加載
$scope.loadMore = function () {
    $http.get('/lapp/Trouble/GetMyTroubleList?pageIndex=' + $scope.historyListData.pageIndex + '&pageSize=' + $scope.historyListData.pageSize).success(function (response) {
        if (response.code === '1' && response.list.List.length > 0) {
            $scope.historyListData.object = $scope.historyListData.object.concat(response.list.List);
            $scope.historyListData.pageIndex++;
            if (response.list.List.length < $scope.historyListData.pageSize) {
                $scope.historyListData.hasmore = false;
            }
        } else {
            $scope.historyListData.hasmore = false;
        }
        $scope.$broadcast('scroll.infiniteScrollComplete');
    }).error(function (response) {
        $scope.alert('網絡不給力，請檢查網絡設置');
        self.location = "vipoa://close";
    });
};
//首次加載數據
$scope.$on('$stateChangeSuccess', function () {
    $scope.loadMore();
});

下拉執行上拉的問題

使用 ion-refresher 和 ion-infinite-scroll的時候,出現了每次下拉刷新的時候,都會屢次觸發上拉加載控件的事件

解決辦法：

若是ion-infinite-scroll 的 immediate-check 屬性沒有設置 ,那麼改成immediate-check="false"

若是ion-infinite-scroll 的 immediate-check 屬性值爲 false ,那麼將list-item的ng-repeat循環改成collection-repeat,由於ng-repeat由於未知緣由在下拉的時候會觸發ion-infinite-scroll的滾動條距離底部不足1%這個條件,而collection-repeat則不會

還有一個緣由就是在下拉刷新的代碼裏寫了$scope.$broadcast('scroll.infiniteScrollComplete');
反過來在上拉加載裏寫了$scope.$broadcast('scroll.refreshComplete');也會引發上拉加載觸發下拉刷新

三星安卓手機遇到問題

遇到一個a連接包住圖片的跳轉問題，點擊連接圖片激活了圖片預覽，安卓原生加了處理以後圖片預覽不跳出，可是事實上只是隱藏了效果，圖片預覽層仍是存在，因此須要將圖片作爲css背景處理。