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使用，参照官网