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背景处理。