我已经按照几个教程尝试在离子上实现无限滚动,它不会调用httprequest,而只是在DOM中为已经加载的列表显示更多元素(我的JSON返回100多个项目)这对我的情况来说已经足够了。)
以下是我的代码。
$scope.numberOfItemsToDisplay = 10;
显示10个项目。$scope.loadMore;
来电所假设的+10项。$scope.loadMore = function(...
加载+10滚动到最后。controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
},
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('AdsCtrl', function($scope, $http) {
$scope.name = 'World';
$scope.numberOfItemsToDisplay = 10;
$scope.ads = [];
$http.get('http://some-url.com/list.json').success(function(data) {
$scope.ads = data;
});
var counter = 0;
$scope.loadMore = function(done) {
console.log('Loading more', $scope.limit);
if ($scope.ads.length > $scope.numberOfItemsToDisplay)
$scope.numberOfItemsToDisplay += 10; // load 20 more items
done(); // need to call this when finish loading more data
}
$scope.loadMore;
})
.controller('AdCtrl', function($scope, $stateParams) {
})
ads.html
<ion-view title="Ads">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-person"></button>
</ion-nav-buttons>
<ion-content has-header="true" on-infinite-scroll="loadMore">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input ng-model="query" type="search" placeholder="Filter" filter="" class="" min-length="" model="" source="">
</label>
<ion-list>
<ion-item ng-repeat="ad in ads | filter:query | limitTo:numberOfItemsToDisplay" class="item item-thumbnail-left" href="#/app/ads/{{ad.id}}">
<img src="http://some-url.com/pictures/{{ad.photo}}">
<h2>{{ad.title}}</h2>
<h4>{{ad.price}} {{ad.currency}}</h4>
<h4>{{ad.group}} » {{ad.category}}</h4>
<h4 style="margin-bottom: 0;">{{ad.shortrelativetime}}</h4>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
有什么想法吗?
答案 0 :(得分:13)
我通过使用下面的代码解决了同样的问题,我有Scheduleles []数组和数据:
HTML:
<li class="item" ng-repeat="schedule in Schedules | filter:scheduleSearch | limitTo:numberOfItemsToDisplay">
Display some data
</li>
<ion-infinite-scroll on-infinite="addMoreItem()" ng-if="Schedules.length > numberOfItemsToDisplay"></ion-infinite-scroll>
控制器:
$scope.numberOfItemsToDisplay = 10; // Use it with limit to in ng-repeat
$scope.addMoreItem = function(done) {
if ($scope.Schedules.length > $scope.numberOfItemsToDisplay)
$scope.numberOfItemsToDisplay += 10; // load number of more items
$scope.$broadcast('scroll.infiniteScrollComplete')
}
这里,我每次调用addMoreItem()时都会加载10个项目。
答案 1 :(得分:2)
抱歉,我没有阅读您的所有代码,但我基本上知道您的问题。
我建议您使用ion-infinite-scroll
,也许这会有所帮助。
请参阅http://codepen.io/elm/pen/Becqp以了解有关实施的更多信息。
希望这可以帮到你^^
答案 2 :(得分:-1)
我完成了它 numberOfItemsToDisplay&#34;&GT;
<input id="fileData" name="fileData" type="file" accept=".jpg, .jpeg" />