[英]Ionic infinite scroll doesn't work on all android devices
我目前正在开发一个离子应用程序并成功实现了无限滚动功能。 它适用于桌面浏览器和较新的Android设备,但是,我遇到运行Android 4.1或更低版本的手机的问题。
问题:
我打开页面,它加载并显示前20项正常,我滚动到底部,接下来的20项加载,但它不让我滚动任何进一步看到接下来的20项。
这是一个GIF,显示它在我的桌面上的样子(它应该工作的方式)。 桌面GIF
这是另一个GIF显示它在我的xperia手机上的外观(注意它不会让我在新装的物品上进一步滚动)。 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>
我已经被这个问题困住了2天,谷歌搜索了几个小时并尝试了许多不同的东西,但我找不到任何修复它的东西。
使用collection-repeat
而不是ng-repeat
。 用ng-repeat
刷新视图似乎不是Ionic。
我找到了一个解决方法......改变这一点
<ion-content>
至
<ion-content overflow-scroll='false'>
在此特定视图中禁用本机滚动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.