【Ionic入门】Ionic 列表

       看过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>