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

示例

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>

实例预览

?

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

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