我目前正在開發離子應用程序併成功實現了無限滾動功能。它適用於桌面瀏覽器和較新的Android設備,但是,我遇到了運行Android 4.1或更低版本的手機的問題。離子無限滾動不適用於所有Android設備
問題:
我打開網頁,加載和顯示的第一個20個項目就好了,我滾動至底部,接下來的20個項目負荷,但它不會讓我繼續滾動進一步查看接下來的20個項目。
這是一個GIF圖像,顯示了它在我的桌面上的樣子(它應該工作的方式)。 desktop gif
這裏是展示它的外觀我的XPERIA手機上(注意它是如何不讓我上新加載的項目進一步滾動)另GIF。 xperia gif
然而,當我刷新頁面,或加載在未來20個項目後打開手機進入橫屏模式,滾動所以好像手機不知道屏幕高度時,改變工作得很好新項目加載,所以我想我可以通過簡單地添加$ionicScrollDelegate.resize();
來告訴視圖重新計算其容器的大小,但似乎並沒有解決它。
這裏是我的JavaScript代碼:
.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
$scope.items = [];
$scope.page = 1;
$scope.totalPages = 1;
$scope.loadMore = function() {
if ($scope.page <= $scope.totalPages) {
$http.get('http://localhost/test/recent/' + $scope.page).success(function(items) {
var i = items.data.length;
$scope.totalPages = items.pages;
$scope.items = $scope.items.concat(items.data);
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.page = $scope.page + 1;
if ($scope.page == $scope.totalPages + 1) {
$scope.noMoreItemsAvailable = true;
}
});
}
}
}])
HTML:
<ion-view view-title="Hello Stackoverflow">
<ion-content>
<a class="item" ng-repeat="item in items">
{{item.title}}
<span class="item-note">
{{ item.timestamp | myDate }}
</span>
</a>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</ion-view>
我已經遇到這個問題FOR2天,一派幾個小時,嘗試了很多不同的東西,但我找不到任何修復它的東西。
我已經在這裏報道了這個問題:https://github.com/driftyco/ionic/issues/9443 –