移动端安卓和IOS开发框架Framework7教程-多媒体列表（Media List View）

时间：2016-06-16 02:20:34 阅读：365 评论：0 收藏：0 [点我收藏+]

多媒体列表是列表（list view）的扩展，它是为了展示更复杂的数据比如产品，服务，用户等等。

当然，它的布局更为复杂：

<div?class="list-block?media-list">
????<ul>
????????<li>
????????????<div?class="item-content">
????????????????<div?class="item-media">
????????????????????<img?src="path/to/img.jpg">
????????????????</div>
????????????????<div?class="item-inner">
????????????????????<div?class="item-title-row">
????????????????????????<div?class="item-title">Element?title</div>
????????????????????????<div?class="item-after">Element?label</div>
????????????????????</div>
????????????????????<div?class="item-subtitle">Subtitle</div>
????????????????????<div?class="item-text">Additional?description?text</div>
????????????????</div>
????????????</div>
????????</li>
????</ul>
</div>

复制

其中：

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

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

item-title-row?-?item-title?和?item-after的主要弹性(flex)容器。必选元素。

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

item-subtitle?- 额外的单行标题。可选元素。
item-text?- 额外的两行布局的容器，用来放置细节描述。可选元素。

示例

<div?class="content-block-title">Songs</div>
<div?class="list-block?media-list">
??<ul>
????<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">Yellow?Submarine</div>
????????????<div?class="item-after">$15</div>
??????????</div>
??????????<div?class="item-subtitle">Beatles</div>
??????????<div?class="item-text">Lorem?ipsum?dolor?sit?amet...</div>
????????</div>
??????</a>
????</li>
????...
??</ul>
</div>
<div?class="content-block-title">Mail?App</div>
<div?class="list-block?media-list">
??<ul>
????<li>
??????<a?href="#"?class="item-link?item-content">
????????<div?class="item-inner">
??????????<div?class="item-title-row">
????????????<div?class="item-title">Facebook</div>
????????????<div?class="item-after">17:14</div>
??????????</div>
??????????<div?class="item-subtitle">New?messages?from?John?Doe</div>
??????????<div?class="item-text">Lorem?ipsum?dolor?sit?amet...</div>
????????</div>
??????</a>
????</li>
????...
??</ul>
</div>
<div?class="content-block-title">Something?more?simple</div>
<div?class="list-block?media-list">
??<ul>
????<li>
??????<div?class="item-content">
????????<div?class="item-media"><img?src="..."?width="44"></div>
????????<div?class="item-inner">
??????????<div?class="item-title-row">
????????????<div?class="item-title">Yellow?Submarine</div>
??????????</div>
??????????<div?class="item-subtitle">Beatles</div>
????????</div>
??????</div>
????</li>
????...
??</ul>
</div>
<div?class="content-block-title">Inset</div>
<div?class="list-block?media-list?inset">
??<ul>
????<li>
??????<a?href="#"?class="item-link?item-content">
????????<div?class="item-media"><img?src="..."?width="44"></div>
????????<div?class="item-inner">
??????????<div?class="item-title-row">
????????????<div?class="item-title">Yellow?Submarine</div>
??????????</div>
??????????<div?class="item-subtitle">Beatles</div>
????????</div>
??????</a>
????</li>
????...
??</ul>
</div>

复制

实例预览

移动端安卓和IOS开发框架Framework7教程-多媒体列表（Media List View）

原文：http://zaixianshouce.iteye.com/blog/2304550

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)