php – Cordova android：在onsenui中使用无限滚动从数据库加载

发布时间：2020-12-13 22:23:22 所属栏目：PHP教程来源：网络整理

导读：我正在开发一个与Onsenui和Cordova在 Android中的混合移动应用程序,我想在主页中显示一些数据并在向下滚动时加载更多项目. 我知道这是使用ons-infinite-scroll完成的这是我的尝试 ons-scroller infinit-scroll-enable="true" can-load="true" on-scrolled="

我正在开发一个与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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!