ionic中的常用组件(2)

9,list
用来显示信息列表，如联系人列表、播放列表或菜单。

<!-- 普通list -->
  <ion-list >
    <ion-item>item1</ion-item>
    <ion-item>item2</ion-item>
    <ion-item>item3</ion-item>
  </ion-list>

demo :

<!-- 分组list -->
  <ion-list >
    <ion-item-group>
        <ion-item-divider style="font-size:12px" >江苏</ion-item-divider>
        <ion-item >南京</ion-item>
        <ion-item >无锡</ion-item>
        <ion-item >苏州</ion-item>
        <ion-item-divider style="font-size:12px" >上海</ion-item-divider>
        <ion-item >浦东区</ion-item>
        <ion-item >虹口区</ion-item>
        <ion-item >徐汇区</ion-item>
    </ion-item-group>
  </ion-list>

<!-- 图标list -->
  <ion-list>
    <ion-item>
      <ion-icon slot="start" name="home"></ion-icon>
      首页
      <ion-note item-end>更多</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon slot="start" name="mail"></ion-icon>
      邮件
      <ion-note item-end>查看</ion-note>
    </ion-item>
  </ion-list>

demo

<!-- 带img的list -->
  <ion-list>
      <ion-item>
        <ion-avatar item-start>
          <img src="../../assets/image/1.png"/>
        </ion-avatar>
        <h3>小张</h3>
        <p>你打球像cxk</p>
      </ion-item>
      <ion-item>
        <ion-avatar item-start>
          <img src="../../assets/image/2.png"/>
        </ion-avatar>
        <h3>小三</h3>
        <p>你打球像cxk</p> 
      </ion-item>
      <ion-item>
        <ion-avatar item-start>
          <img src="../../assets/image/3.png"/>
        </ion-avatar>
        <h3