ionic组件-列表属性

文章参考来源：ionic中文网(http://www.ionic.wang/components_doc-index-id-259.html)

列表由多行项组成，可以包含文本、按钮、切换、图标、缩略图等等。列表通常包含具有类似数据内容的项，如图像和文本。

列表支持多种交互，包括滑动项以显示选项、拖动以重新排序列表中的项目和删除项目。

普通列表语法格式：

<ion-list>
  <ion-item>
     <ion-label>我是基本列表1 </ion-label>
  </ion-item>

  <ion-item>
     <ion-label> 普通列表2 </ion-label>
  </ion-item>
</ion-list>

效果展示：

列表分组语法格式（关键字：ion-item-divider）：

	<ion-item-divider>
	    <ion-label>A</ion-label>   <!--列表表头-->
	  </ion-item-divider>
	
	  <ion-item>
	    <ion-label>A1</ion-label>
	  </ion-item>
	  <ion-item>
	    <ion-label>A2</ion-label>
	  </ion-item>
	  <ion-item>
	    <ion-label>A3</ion-label>
	  </ion-item>
	
	  <ion-item-divider>
	    <ion-label>B</ion-label>  <!--列表表头-->
	  </ion-item-divider>
	
	  <ion-item>
	    <ion-label>B1</ion-label>
	  </ion-item>
	  <ion-item>
	    <ion-label>B2</ion-label>
	  </ion-item>
	  <ion-item>
	    <ion-label>B3</ion-label>
  </ion-item>

效果展示：

列表中带图标语法格式（关键字：ion-icon）：

<ion-list lines="full">  <!--lines="full" 分割线填满-->
    <ion-item [routerLink]="[ '/button']">   <!--添加跳转链接-->
      <ion-icon slot="start" name="alarm-outline" color="tertiary"></ion-icon>   <!--关键语法，slot="start"：图标在左--> 
      <ion-label>闹钟</ion-label>

    </ion-item>
    <ion-item [routerLink]="[ '/button']"> 
      <ion-icon slot="start" name="call-outline" color="success"></ion-icon>
      <ion-label>电话</ion-label>
    </ion-item>
  </ion-list>

效果展示：

列表中带头像语法格式（关键字：ion-avatar）：

<ion-list>
    <ion-item>
         <!--关键语法，slot="start"：表示头像在左-->
      <ion-avatar slot="start">
        <img src="assets/icon/湿巾.png" />
      </ion-avatar>

      <ion-label>Item Avatar湿巾</ion-label>
    </ion-item>
  
    <ion-item>

      <ion-avatar slot="start">
        <img src="assets/icon/风景.jpg" />
      </ion-avatar>

      <ion-label>Item Avatar风景</ion-label>
    </ion-item>
    <ion-item>

        <!--slot="end"：表示头像在右-->
      <ion-avatar slot="end">
        <img src="assets/icon/湿巾.png" />
      </ion-avatar>

      <ion-label>Item Avatar湿巾</ion-label>
    </ion-item>
  
    <ion-item>

      <ion-avatar slot="end">
        <img src="assets/icon/风景.jpg" />
      </ion-avatar>

      <ion-label>Item Avatar风景</ion-label>
    </ion-item>
  </ion-list>

效果展示：

列表中带图片语法格式（关键字：ion-thumbnail）：

 <ion-list>
    <ion-item>
        <!--关键语法-->
      <ion-thumbnail slot="start">
        <ion-img src="assets/icon/湿巾.png"></ion-img>
      </ion-thumbnail>
      <ion-label> 列表中的图片1 </ion-label>
    </ion-item>
  
    <ion-item>
      <ion-thumbnail slot="start">
        <ion-img src="assets/icon/风景.jpg"></ion-img>
      </ion-thumbnail>
      <ion-label> 列表中的图片2 </ion-label>
    </ion-item>
    <ion-item>
      <ion-thumbnail slot="end">
        <ion-img src="assets/icon/湿巾.png"></ion-img>
      </ion-thumbnail>
      <ion-label> 列表中的图片1 </ion-label>
    </ion-item>
  
    <ion-item>
      <ion-thumbnail slot="end">
        <ion-img src="assets/icon/风景.jpg"></ion-img>
      </ion-thumbnail>
      <ion-label> 列表中的图片2 </ion-label>
    </ion-item>
  </ion-list>

效果展示：

列表中滑动效果语法格式（关键字：ion-item-sliding）：

<ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Item1111</ion-label>
      </ion-item>
      <!--滑动带出的菜单-->
      <ion-item-options side="start">
        <ion-item-option color="success">编辑</ion-item-option>
        <ion-item-option color="primary" >分享</ion-item-option>
      </ion-item-options>
  
      <ion-item-options side="end">
        <ion-item-option (click)="unread(item)">Unread1111</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item>
        <ion-label>Item2222</ion-label>
      </ion-item>
      <!--滑动带出的菜单-->
      <ion-item-options side="start">
        <ion-item-option color="success">编辑</ion-item-option>
        <ion-item-option color="primary" >分享</ion-item-option>
      </ion-item-options>
  
      <ion-item-options side="end">
        <ion-item-option (click)="unread(item)">Unread2222</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

效果展示：

 

列表中带按钮语法格式（关键字：ion-button）：

  <ion-list-header>
    <ion-label>New This Week</ion-label>
    <ion-button color="success">更多</ion-button>
  </ion-list-header>

效果展示：