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

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

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

1. <!-- 多媒体列表有额外的“media-list”类 -->
2. <div class="list-block media-list">
3.     <ul>
4.         <li>
5.             <div class="item-content">
6.                 <div class="item-media">
7.                     <img src="path/to/img.jpg">
8.                 </div>
9.                 <div class="item-inner">
10.                     <div class="item-title-row">
11.                         <div class="item-title">Element title</div>
12.                         <div class="item-after">Element label</div>
13.                     </div>
14.                     <div class="item-subtitle">Subtitle</div>
15.                     <div class="item-text">Additional description text</div>
16.                 </div>
17.             </div>
18.         </li>
19.     </ul>
20. </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 - 额外的两行布局的容器，用来放置细节描述。可选元素。

示例

1. <div class="content-block-title">Songs</div>
2. <div class="list-block media-list">
3.   <ul>
4.     <li>
5.       <a href="#" class="item-link item-content">
6.         <div class="item-media"><img src="..." width="80"></div>
7.         <div class="item-inner">
8.           <div class="item-title-row">
9.             <div class="item-title">Yellow Submarine</div>
10.             <div class="item-after">$15</div>
11.           </div>
12.           <div class="item-subtitle">Beatles</div>
13.           <div class="item-text">Lorem ipsum dolor sit amet...</div>
14.         </div>
15.       </a>
16.     </li>
17.     ...
18.   </ul>
19. </div>
20. <div class="content-block-title">Mail App</div>
21. <div class="list-block media-list">
22.   <ul>
23.     <li>
24.       <a href="#" class="item-link item-content">
25.         <div class="item-inner">
26.           <div class="item-title-row">
27.             <div class="item-title">Facebook</div>
28.             <div class="item-after">17:14</div>
29.           </div>
30.           <div class="item-subtitle">New messages from John Doe</div>
31.           <div class="item-text">Lorem ipsum dolor sit amet...</div>
32.         </div>
33.       </a>
34.     </li>
35.     ...
36.   </ul>
37. </div>
38. <div class="content-block-title">Something more simple</div>
39. <div class="list-block media-list">
40.   <ul>
41.     <li>
42.       <div class="item-content">
43.         <div class="item-media"><img src="..." width="44"></div>
44.         <div class="item-inner">
45.           <div class="item-title-row">
46.             <div class="item-title">Yellow Submarine</div>
47.           </div>
48.           <div class="item-subtitle">Beatles</div>
49.         </div>
50.       </div>
51.     </li>
52.     ...
53.   </ul>
54. </div>
55. <div class="content-block-title">Inset</div>
56. <div class="list-block media-list inset">
57.   <ul>
58.     <li>
59.       <a href="#" class="item-link item-content">
60.         <div class="item-media"><img src="..." width="44"></div>
61.         <div class="item-inner">
62.           <div class="item-title-row">
63.             <div class="item-title">Yellow Submarine</div>
64.           </div>
65.           <div class="item-subtitle">Beatles</div>
66.         </div>
67.       </a>
68.     </li>
69.     ...
70.   </ul>
71. </div>

复制

实例预览