Я занимаюсь разработкой гибридного мобильного приложения с Onsenui и Cordova для Android, в котором я хочу отображать некоторые данные на домашней странице и загружать больше элементов при прокрутке вниз.
Я знаю, что это достигается с помощью ons-infinite-scroll
Вот что я попробовал
<ons-scroller
infinit-scroll-enable="true" can-load="true" on-scrolled="populateList()" threshold="2" style="height:100%">
<div ng-repeat="item in items">
//display the data
</div>
</ons-scroller>
Js
module.controller('AppController', function($scope,$http) {
//for initial loading
$scope.items=new Array();
$scope.page=1;
$http.get(url+"getlotterylist").then(function(msg){
$scope.loading=false;
$scope.items=msg.data;
});
//load more when scrolls down
$scope.populateList=function(){
$http.get(url+"getlotterylist&&page="+$scope.page).then(function(msg){
$scope.items=msg.data;
$scope.page +=1;
});
}
}
Актуальная проблема, когда прокрутите его вниз заменяет старые данные новыми .Как я могу решить это?. Также я хочу остановить прокрутку после получения всех данных
PHP
function get_lottery_list(){
$limit=7;
$page=(isset($_GET['page']))?$_GET['page']:1;
$start=($page-1)*$limit;
$connect=db_connect();
$result=$connect->prepare("SELECT * FROM `daily_draw_details` ORDER BY `id` DESC LIMIT $start,$limit");
$result->execute();
echo json_encode($result->fetchAll(PDO::FETCH_ASSOC));
}
Вы перезаписываете все свои пункты $scope.items=msg.data;
каждый раз, когда вы делаете запрос. Просто добавьте новые элементы в конец $scope.items
вместо. Кроме того, вы можете проверить ons-lazy-repeat
так как больше нет поддержки <ons-scroller infinite-scroll>
: http://onsen.io/guide/overview.html#UsingLazyRepeat
Других решений пока нет …