[英]Multiple ion-scroll both with infinite scroll
我有两个离子滚动标签。 每个这些离子滚动标签内都有一个列表。 这些列表中的每一个都以10个项目开头,并且当用户到达特定离子滚动的底部时,它应该加载更多。 我面临的问题是,这完全无法正常工作。 如果我滚动第一个滚动窗口并浏览所有项目,则应该说没有更多内容了。 但是,这不会发生,相反,如果我在第二个滚动窗口中滚动,则它将在第一和第二个离子滚动窗口中加载更多项目(我不想要)。 本质上,我希望两个离子涡旋彼此完全独立。 我希望每个人都能加载自己的内容。 我希望这是有道理的。 这是我的codepen:
http://codepen.io/polska03/pen/jWKRwP
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-app="ionicApp" ng-controller="MyCtrl" class="background-places">
<ion-view>
<ion-content class="" scroll='false'>
<ion-scroll style="height:50%">
<ion-list>
<ion-item collection-repeat="list in _list">
<h2>Item</h2>
</ion-item>
</ion-list>
<button class="button button-full button-outline button-positive" ng-if="noMoreContent">
No more Content
</button>
<ion-infinite-scroll ng-if="canWeLoadMoreContent()" on-infinite="populateList()" distance="1%">
</ion-infinite-scroll>
</ion-scroll>
<hr>
<hr>
<ion-scroll style="height:50%">
<ion-list>
<ion-item collection-repeat="list2 in _list2">
<h2>Item</h2>
</ion-item>
</ion-list>
<button class="button button-full button-outline button-positive" ng-if="noMoreContent2">
No More Content
</button>
<ion-infinite-scroll ng-if="canWeLoadMoreContent2()" on-infinite="populateList2()" distance="1%">
</ion-infinite-scroll>
</ion-scroll>
</ion-content>
</ion-view>
</body>
</html>
Javascript:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope._list = [];
$scope.populateList = function() {
for (var i = 0; i <= 9; i++) {
$scope._list.push({});
}
console.log($scope._list.length);
$scope.$broadcast('scroll.infiniteScrollComplete');
}
$scope.noMoreContent = false;
$scope.canWeLoadMoreContent = function() {
if($scope._list.length > 15) {
$scope.noMoreContent = true;
return false;
}else{
return true;
}
}
$scope.populateList();
$scope._list2 = [];
$scope.populateList2 = function() {
for (var i = 0; i <= 9; i++) {
$scope._list2.push({});
}
console.log($scope._list2.length);
$scope.$broadcast('scroll.infiniteScrollComplete');
}
$scope.noMoreContent2 = false;
$scope.canWeLoadMoreContent2 = function() {
if($scope._list2.length > 15) {
$scope.noMoreContent2 = true;
return false;
}else{
return true;
}
}
$scope.populateList2();
});
问题来自指令中未正确解决的'require'?^ ionicScroll。 不知道为什么,因为我不是AngularJS专家。 也就是说,我找到了一种解决方法,该方法是在内容标签周围插入一个额外的div,如http://codepen.io/priand/pen/PzYbZG所示 ,如果这可以帮助某人。
<div>
<ion-content class="has-header col col-50">
<ion-list>
<ion-item ng-repeat="item in items"
item="item">
Item {{ item.id }}
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</div>
<div>
<ion-content class="has-header col col-offset-50 col-50">
<ion-list>
<ion-item ng-repeat="item in items2"
item="item">
Item {{ item.id }}
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable2" on-infinite="loadMore2()" distance="10%"></ion-infinite-scroll>
</ion-content>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.