Framework7学习笔记之 列表视图

一：列表视图

列表区用来以列表的风格来组织元素，级别上与内容区(Content Block)同级，因此不能将list-block包含在content-block中！

<div class="list-block">
<ul>
<li>
列表元素。。。
</li>
......
</ul>
<div class="list-block-label">List block label text</div>
</div>

二：旧版列表视图

旧版列表视图使用 list-block 标签包含列表视图。

从功能上划分，主要有两种列表：简单陈列、链接列表。简单陈列只是用来显示数据，点击列表元素无反应；链接列表中的列表元素则是一个超链接，点击后跳转到元素详情。

从外观上划分，种类就更多了：简单文本型、图标+文本型、图片+文本型......

高阶功能：列表分隔、列表元素分组、列表视图内嵌风格、可滑动、可拖拽...

1:简单陈列元素

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

2:链接列表元素

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

3:列表分隔

<li class="item-divider">分隔行标题</li>

4:列表分组（其实就是两个列表）

<!-- 1:第一个分组-->
<div class="list-group">
<ul>
<li class="list-group-title">分组标题</li>
<li class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">元素标题</div>
<div class="item-after">元素标签</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">元素标题</div>
<div class="item-after"><span class="badge">角标</span></div>
</div>
</li>
...
</ul>
</div>

<!-- 2:第二个分组-->
<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>

5:视图内嵌

可以在列表视图的div中增加 inset、tablet-inset类来实现内嵌视图风格。

6:可滑动列表

元素可滑动唤出操作选项，参考QQ的聊天信息左滑、删除。

<li class="swipeout">
<div class="swipeout-content item-content">
<div class="item-media">元素内容</div>
<div class="item-inner">元素内容</div>
</div>
<div class="swipeout-actions-right">
<a href="#" class="选择器名">操作</a>
</div>
</li>

7:可拖拽列表

可拖拽列表的列表元素可以在界面上手动上下拖拽调整位置。

<!-- 加在列表区上额外的“sortable”类 -->
<div class="list-block sortable">
<li>
<div class="item-content">
<div class="item-media">...</div>
<div class="item-inner">...</div>
</div>
<!-- 拖拽按钮：通过它来拖拽列表元素 -->
<div class="sortable-handler"></div>
</li>
</div>

三：新版列表视图

新版列表视图使用 list 标签。

新版列表增加了许多新特性：列表元素标题增加了header和footer、列表元素增加了img和text使得列表元素更加丰满、增加了按钮列表。。。

1：增加标题头部、底部的列表元素

<li>
<div class="item-content">
<div class="item-media">
<i class="icon my-icon"></i>
</div>
<div class="item-inner">
<div class="item-title">
<div class="item-header">列表元素头</div>
列表元素标题
<div class="item-footer">列表元素底</div>
</div>
<div class="item-after">列表元素尾</div>
</div>
</div>
</li>

2：多媒体列表元素

<li>
<a href="#" class="item-link item-content">
<div class="item-media"><img src="图片地址" width="80"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">标题</div>
<div class="item-after">标签</div>
</div>
<div class="item-subtitle">子标题</div>
<div class="item-text">具体内容</div>
</div>
</a>
</li>

3:按钮列表

<div class="list">
<ul>
<li>
<a href="#" class="item-link list-button">Button 1</a>
</li>
<li>
<a href="#" class="item-link list-button">Button 2</a>
</li>
<li>
<a href="#" class="item-link list-button">Button 3</a>
</li>
</ul>
</div>