ionic使用记录----列表.list

列表 : .list

列表非常适合于手机屏幕上的信息的显示。使用.list定义列表容器，使用.item定义列表成员：

 
 
<any class="list">
    <any class="item">...</any>
    <any class="item">...</any>
    <any class="item">...</any>
    <any class="item">...</any>
</any>

对列表外观的定制化主要集中在.item元素上，.list元素仅有少数的几个样式定义：

成员容器 : .item

列表的样式定制主要发生在.item元素上。在.item元素内，可以插入文本、徽章、图标、图像（头像、缩略图或大图）、按钮等各种样式的元素：

修正： 徽章：badge

.item : 嵌入文本

列表成员中经常需要显示不同规格的文本，比如今日头条的新闻列表：

.item元素可以使用h1~h6/p标签插入不同规格的文本。

.item : 嵌入图标

列表成员的内容中插入图标，比单纯的文字更加生动：

要插入图标，需要满足两个条件：

1. 在.item元素上声明图标位置。图标可以位于列表的左侧或右侧，分别使用.item-icon-left和.item-icon-right声明
2. 在.item元素内插入图标。

.item : 嵌入头像

很多社交App中，一个相当固定的UI模式是包含用户头像的信息列表：

在ionic中，头像被设置为40x40固定大小。和插入图标类似，向.item中插入头像需要满足两个条件：

1. 在.item元素上声明头像位置。头像可以位于列表的左侧或右侧，分别使用.item-avatar-left和.item-avatar-right声明
2. 在.item元素内使用img标签插入头像。

.item : 嵌入缩略图

回到今日头条的新闻列表，我们给它加上两张新闻图片：

在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片。和插入头像类似，向.item中插入缩略图需要满足两个条件：

1. 在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧，分别使用.item-thumbnail-left和.item-thumbnail-right声明
2. 在.item元素内使用img标签插入头像。

注意：将img标签放到.item内容的开头！

.item : 嵌入大图

大图非常有冲击力，在图片类App中很常见：

<div class="item item-image">
                <img src="img/road.png">
</div>