【Ionic入门】Ionic 列表

缺乏、安全感 2022-07-28 00:08 199阅读 0赞

看过Ionic官网的,都知道Ionic有成型的CSS文档和JS文档. 对于初学者来说,帮助文档是最好的学习材料. 在刚接触Ionic和AngularJS的时候,基本的东西都不了解,就经常性的看文档.看demo,实现一下,发现移动端挺好玩的,界面又好看.

今天介绍一下Ionic列表,其实也是罗列一下常用的几种:

## 1.带头像的列表: ##

这种形式就是咱们的微信,QQ常用的界面,带头像的列表.

## ![Center][] ##

<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.缩略图的列表: ##

这种列表,有些团购,等等网站的页面会使用.

## ![Center 1][] ##

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

![Center 2][]

[Center]: /images/20220727/f4885eb67c8c4e1c91f4970a335f28a5.png
[Center 1]: /images/20220727/42c0151515d64228a9835aa79c497fc7.png
[Center 2]: /images/20220727/cc380b17f4964c4c960c19c8216b7ca7.png