移动端安卓和IOS开发框架Framework7教程-列表（表格）

常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组（sections/groups）。

列表有以下用途：

让用户可以浏览结构化的多级数据
展现一个索引列表
在可视化的不同分组中，显示详细信息和控件
展现一个可以选择的列表

列表布局

现在让我们看一下常见的列表布局

列表区（List block）

列表区（List block）是你的列表元素的容器，基本和内容区(Content Block)一样，只不过面向列表元素。

首先, 所有的列表元素都要被包裹在含有“list-block”类的元素中：

<div class="list-block">
<ul>
... list elements here ...
</ul>
</div>

复制

不要将带有list-block类的元素放置在“content-block”中!

列表区标签（List block label）

你可以将列表区标签（List block label）加在列表区（List block）的末尾：

<div class="list-block">
<ul>
... list elements here ...
</ul>
<div class="list-block-label">List block label text</div>
</div>

复制

列表项目（List item/element）

单个列表项目的布局相当复杂而灵活：

<li>
<div class="item-content">
<div class="item-media">
<i class="icon my-icon"></i>
</div>
<div class="item-inner">
<div class="item-title">
List element title
</div>
<div class="item-after">
List element label
</div>
</div>
</div>
</li>

复制

其中：

item-content - item-media和item-inner的主要弹性(flex)容器。必选元素。

item-media - 媒体元素（如图标，图片等）的容器。可选元素。
item-inner - item-title和item-after的主要弹性(flex)容器。必选元素。

item-title - 单行列表项目标题。必选元素。
item-after - 列表项目标签。可以包含任意额外的html元素（例如标签文本、徽章、switch/toggle、按钮等等）。可选元素。

因为.item-content元素的是display属性是flex-box, 需要注意，“item-media”和“item-inner”应该是“item-content”的直接子元素!
同样的，“item-title”和“item-after”应该是“item-inner”的直接子元素!

同时需要注意，如果你的列表项目不含其它元素, 你可以把“item-content”类直接加在<li>元素上：

<li class="item-content">
<div class="item-media">
<i class="icon my-icon"></i>
</div>
<div class="item-inner">
<div class="item-title">
List element title
</div>
<div class="item-after">
List element label
</div>
</div>
</li>

复制

示例

<body>
...
<div class="page-content">
<div class="content-block-title">Full Layout</div>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Another item</div>
<div class="item-after">Another label</div>
</div>
</li>
</ul>
<div class="list-block-label">List block label text goes here</div>
</div>
<div class="content-block-title">Only titles</div>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item title</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item with badge</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Another item</div>
</div>
</li>
</ul>
</div>
</div>
</body>

复制

实例预览

链接元素

当然，多数情况下我们需要将列表中的元素当作链接使用(<a>)，来指向其他页面或者其他数据。在这种情况下，我们需要将“item-content”包裹在<a class="item-link">元素中：

<a href="#" class="item-link">
<div class="item-content">
<div class="item-media">...</div>
<div class="item-inner">...</div>
</div>
</a>

复制

如果你的链接只包含“item-content”，那我们可以直接将链接作为“item-content”：

<a href="#" class="item-link item-content">
<div class="item-media">...</div>
<div class="item-inner">...</div>
</a>

复制

注意，当“item-inner”在“item-link”中时，会有额外的右内边距（right padding）和chevron icon

示例

<div class="list-block">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Another item</div>
<div class="item-after">Another label</div>
</div>
</a>
</li>
</ul>
<div class="list-block-label">List block label text goes here</div>
</div>

复制

实例预览

列表分割元素（List Divider）

列表分隔元素是一个简单的列表元素并包含标题，它在视觉上分隔两个列表元素：

<li class="item-divider">Divider title here</li>

复制

<div class="list-block">
<ul>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Title</div>
</div>
</li>
<li class="item-divider">Divider title here</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Another item</div>
<div class="item-after">Another label</div>
</div>
</li>
</ul>
<div class="list-block-label">List block label text goes here</div>
</div>

复制

实例预览

分组列表（Grouped Lists）

有时我们需要将列表区里的元素分组，在这种情况下，我们需要用额外的分组元素：

<div class="list-block">
<div class="list-group">
<ul>
<li class="list-group-title">First group</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</li>
...
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">Second Group</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item title</div>
<div class="item-after">Label</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Item with badge</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</li>
...
</ul>
</div>
</div>

复制

实例预览

也许你会问分组元素和分隔元素有什么区别？如果使用了分组元素，当在分组内部滚动时，标题会保持在固定位置。

内嵌列表区域（Inset List Block）

列表区还有内嵌（非全屏）样式，只需要给列表区域元素加上“inset”类：

<div class="list-block inset">
<ul>
...
</ul>
</div>
复制

使用“tablet-inset”类，可以使列表区在iPad下以内嵌的方式显示，而在iPhone中以普通样式显示：

<div class="list-block tablet-inset">
<ul>
...
</ul>
</div>
复制

实例预览