【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>