ionic framework dersleri zafer çelik

ion-infinite-scroll LoadMore Yapımı – İonic Framework

Merhaba, ionic frameworkte ion-infinite-scroll yani bir sayfada kullanıcı aşağıya indikçe yeni veriler gelme olayını anlatıcam.

Öncelikle benim sunucudan çektiğim 100 satırlık verim var ve ben bu verilerin hepsini aynı anda göstermeye kalkınca sistemi zorluyorum, bu olayda sayfa açılınca 3 satır gözükecek scroll indikçe +3 veri olarak bitene kadar gelmeye devam edecek.

Ben ilk başta servisten bütün verilerimin hepsini çekeceğim ve bunu bir değişkene atacağım,(Ben bütün verileri eninde sonunda göstereceğim için böyle yaptım) sonra limit to kullanarak scroll indikce +3 veri gelmesini sağlayacağım.(WordPress in düzeltme olayı beni baya sinir ediyor!)

 

ion-infinite-scroll Yapılışına Bakalım

Html Sayfası:
<ion-list ng-controller="loadVeri">
  

<div class="list card" ng-repeat="veri in veriler | limitTo:veriGosterSayisi" >

<div class="list card">{{veri.veriAd}}
..
.
.
.
<ion-infinite-scroll on-infinite="dahaFazlaVeri()" distance="1%">
  </ion-infinite-scroll>
</ion-list>


Verileri çektiğimiz controller

$http.get($scope.webServiceUrl+"json_veriler.php).then(function(response){
$scope.veriler=response.data;//veriler değişkenine hepsi geldi


LoadVeri Controllerimiz

.controller('loadVeri', function($scope) {

$scope.dahaFazlaVeri= function() {
//scroll buraya geldi
if ($scope.veriler.lenght > $scope.veriGosterSayisi)//
$scope.veriGosterSayisi += 3; //
$scope.$broadcast('scroll.infiniteScrollComplete');//scroll işlevinin bittiğini döndürüyor
}
})

Diğer ionic framework Derslerine buradan ulaşabilirsiniz:

Ve Hepsi Bu Kadar!

Bir Cevap Yazın

CAPTCHA

*