看过Ionic官网的,都知道Ionic有成型的CSS文档和JS文档. 对于初学者来说,帮助文档是最好的学习材料. 在刚接触Ionic和AngularJS的时候,基本的东西都不了解,就经常性的看文档.看demo,实现一下,发现移动端挺好玩的,界面又好看.
今天介绍一下Ionic列表,其实也是罗列一下常用的几种:
1.带头像的列表:
这种形式就是咱们的微信,QQ常用的界面,带头像的列表.
<div class="list">
<a class="item item-avatar" href="#">
<img src="http://www.runoob.com/try/demo_source/venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
<a class="item item-avatar" href="#">
<img src="http://www.runoob.com/try/demo_source/spengler.jpg">
<h2>Egon</h2>
<p>We're gonna go full stream.</p>
</a>
<a class="item item-avatar" href="#">
<img src="http://www.runoob.com/try/demo_source/stantz.jpg">
<h2>Ray</h2>
<p>Ugly little spud, isn't he?</p>
</a>
</div>
2.缩略图的列表:
这种列表,有些团购,等等网站的页面会使用.
<div class="list">
<a class="item item-thumbnail-left" href="#">
<img src="http://www.runoob.com/try/demo_source/blue-album.jpg">
<h2>Weezer</h2>
<p>Blue Album</p>
</a>
<a class="item item-thumbnail-left" href="#">
<img src="http://www.runoob.com/try/demo_source/siamese-dream.jpg">
<h2>Smashing Pumpkins</h2>
<p>Siamese Dream</p>
</a>
<a class="item item-thumbnail-left" href="#">
<img src="http://www.runoob.com/try/demo_source/dookie.jpg">
<h2>Green Day</h2>
<p>Dookie</p>
</a>
</div>
3.collection-repeat和ng-repeat指令
不管什么形式的List在使用时,都是不确定的数据条数,可能有10条可能上万条.这时候这两个指令就突出了它们的作用.
collection-repeat:可以说是高性能的ng-repeat,适用于大数据量的情况.
<ion-content has-tabs="true" on-refresh="onRefresh()">
<ion-refresher></ion-refresher>
<ion-list scroll="false" on-refresh="onRefresh()"
s-editing="isEditingItems"
animation="fade-out"
delete-icon="icon ion-minus-circled">
<ion-item ng-repeat="item in items"
item="item"
buttons="item.buttons"
can-delete="true"
can-swipe="true"
on-delete="deleteItem(item)"
ng-class="{completed: item.isCompleted}">
{{item.title}}
<i class="{{item.icon}}"></i>
</ion-item>
</ion-list>
</ion-content>