Twitterのように、スクロールごとに新しいツイートを取得するような処理をOnsen UIで実現できないだろうか？
ons-pageのng-infinite-scrollという属性を利用することで実現できる。
ng-infinite-scrollにデータを取得する関数を指定し、スクロールによってその関数が呼び出されると、引数としてコールバック関数が渡される。
引き続きデータを取得する場合、そのコールバック関数を実行する。
また、ある特定の範囲でスクロールさせ、データを取得してons-list-itemを追加する場合、その範囲にクラスcontentを追加することで実現できる。
Monacaで新規プロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、Monacaデバッガーで動作確認済み。
下記のサンプルコードでは、高さ200pxのdiv内でスクロールごとに10件ずつons-list-itemが追加され、最大200件まで追加される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap() .controller("HelloController", function($scope) { $scope.list = []; $scope.index = 0; ons.ready(function () { $scope.setList(); }); $scope.more = function (done) { if ($scope.setList() < 200) { done(); } }; $scope.setList = function () { var pos = $scope.list.length; for (var i = pos; i < pos + 10; i++) { $scope.list.push({id: i, name: "name" + i.toString() }); } if (!$scope.$$phase) $scope.$apply(); return i; } }); </script> </head> <body> <ons-page ng-controller="HelloController" ng-infinite-scroll="more"> <ons-toolbar> <div class="center">Scroll test</div> </ons-toolbar> <div class="content" style="height: 200px;"> <ons-list> <ons-list-item ng-repeat="item in list"> <ons-row> <ons-col width="30%">{{item.id}}</ons-col> <ons-col width="70%">{{item.name}}</ons-col> </ons-row> </ons-list-item> </ons-list> </div> </ons-page> </body> </html> |
