我正在开发一个与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;
});
}
}
实际的问题是,当向下滚动它取代旧的数据与新的 .我怎么能解决它?另外,我想在获取所有数据后停止滚动
phpfunction 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