Exploring Ionic Lists

Infinite Lists

因爲手機不適合使用多頁面顯示posts，Infinite Lists成爲各類新聞、諮詢類app的標配。爲了在ionic框架中使用到Infinite Lists，咱們首先學習ion-list。

ion-list

ion-list使用

在ionic中，經過使用ion-list和ion-item來展現數據，經過ng-repeat循環輸出，如demo（使用ionic start mydemo tabs命令生成ionic demo）中的templates/tab-friends.html中顯示：

<ion-list>
      <ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
        {{friend.name}}
      </ion-item>
    </ion-list>

假如咱們返回到html的數據，每次都爲20項，則但屏幕劃到最後一項或前幾項時，則須要監聽檢測到，而且載入下一個20項數據，從而達到無止境的下滑刷新載入更多的目標。這裏，ionic提供了ion-infinite-scroll directive。

ion-infinite-scroll function is more like a scroll detector: it detects when a user is scrolled to a given point above the bottom of the view (default 1%, or 99% of the way down), and executes a function.

因此須要在html中添加這個directive，以下：

<ion-list>
        <ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
            {{friend.name}}
        </ion-item>
        <ion-infinite-scroll on-infinite="addFriends()"></ion-infinite-scroll>
    </ion-list>

在controller中添加addFriends()函數，和載入數據。

同時，在從新徹底載入數據後，須要發送一個scroll.infiniteScrollComplete事件，告訴directive，咱們完成了這個動做，系統會清理scroller和爲下一次的載入數據，從新綁定這一事件。

修改friends controller

經過修改controller，讓list一次載入20個friends數據，這樣達到Infinite Lists效果，以下修改js/controllers.js中FriendsCtrl：

.controller('FriendsCtrl', function($scope, Friends) {
    var currentStart = 0;
    $scope.friends = [];


  $scope.addFriends = function() {
    for (var i = currentStart; i < currentStart+20; i++) {
        $scope.friends.push(Friends.get(currentStart));
    }

    currentStart += 20;
    $scope.$broadcast('scroll.infiniteScrollComplete');
};

$scope.addFriends();
//$scope.friends = Friends.all();
})

service添加mock數據

在service端，調用Friends factory以下：
.factory('Friends', function() {
// Might use a resource here that returns a JSON array

// Some fake testing data
var friends = [
    { id: 0, name: 'Scruff McGruff' },
    { id: 1, name: 'G.I. Joe' },
    { id: 2, name: 'Miss Frizzle' },
    { id: 3, name: 'Ash Ketchum' },
    { id: 4, name: 'Scruff McGruff' },
    { id: 5, name: 'G.I. Joe' },
    { id: 6, name: 'Miss Frizzle' },
    { id: 7, name: 'Ash Ketchum' },
    { id: 8, name: 'Scruff McGruff' },
    { id: 9, name: 'G.I. Joe' },
    { id: 10, name: 'Miss Frizzle' },
    { id: 11, name: 'Ash Ketchum' },{ id: 0, name: 'Scruff McGruff' },
    { id: 12, name: 'G.I. Joe' },
    { id: 13, name: 'Miss Frizzle' },
    { id: 14, name: 'Ash Ketchum' },
    { id: 15, name: 'Scruff McGruff' },
    { id: 16, name: 'G.I. Joe' },
    { id: 17, name: 'Miss Frizzle' },
    { id: 18, name: 'Ash Ketchum' },
    { id: 19, name: 'Scruff McGruff' },
    { id: 20, name: 'G.I. Joe' },
    { id: 21, name: 'Miss Frizzle' },
    { id: 22, name: 'Ash Ketchum' },
    { id: 23, name: 'Scruff McGruff' },
    { id: 24, name: 'G.I. Joe' },
    { id: 25, name: 'Miss Frizzle' },
    { id: 26, name: 'Ash Ketchum' },
    { id: 27, name: 'Scruff McGruff' },
    { id: 28, name: 'G.I. Joe' },
    { id: 29, name: 'Miss Frizzle' },
    { id: 30, name: 'Ash Ketchum' },
    { id: 31, name: 'Scruff McGruff' },
    { id: 32, name: 'G.I. Joe' },
    { id: 33, name: 'Miss Frizzle' },
    { id: 34, name: 'Ash Ketchum' },
    { id: 35, name: 'Scruff McGruff' },
    { id: 36, name: 'G.I. Joe' },
    { id: 37, name: 'Miss Frizzle' },
    { id: 38, name: 'Ash Ketchum' },
    { id: 39, name: 'Scruff McGruff' }
  ];

return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
    return friends[friendId];
    }
}

測試

使用python命令，測試：

python -m SimpleHTTPServer 8000

ion-infinite-scroll 參數

<ion-content ng-controller="MyController">
    <ion-infinite-scroll
        on-infinite="loadMore()"
        distance="1%">
    </ion-infinite-scroll>
</ion-content>

主要有三個參數：

1. on-infinite：expression；含義：What to call when the scroller reaches the bottom.

2. distance (optional) string； 含義：The distance from the bottom that the scroll must reach to trigger the on-infinite expression. Default: 1%.

3. icon(optional) string；含義：The icon to show while loading. Default: 'ion-loading-d'.

也能夠添加ng-if來判斷是否還有更多數據能夠載入，如：

<ion-infinite-scroll
    ng-if="moreDataCanBeLoaded()"
    icon="ion-loading-c"
    on-infinite="loadMoreData()">
</ion-infinite-scroll>

更多的ion-list使用，參照官網