Framework7 - 媒体列表视图
描述
媒体列表视图用于显示复杂的数据结构，如产品、服务和用户信息。
您可以使用 item-content 类来使用媒体列表视图，该类是 item-media(用于媒体元素)和 item-inner(包括标题、副标题、文本元素)类的主要包装器。
示例
以下示例在 Framework7 列表视图中显示列表元素以及图像 −
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Media List View</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Media List View</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Countries</div>
<div class = "list-block media-list">
<ul>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/ind.gif" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">India</div>
<div class = "item-after">Rupees</div>
</div>
<div class = "item-subtitle">Capital - Delhi</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet,
pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/arg.gif" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Argentina</div>
<div class = "item-after">Argentine Peso</div>
</div>
<div class = "item-subtitle">Capital - Buenos Aires</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet,
pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/bgm.gif" width = "80"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Belgium</div>
<div class = "item-after">Euro</div>
</div>
<div class = "item-subtitle">Capital - Brussels</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet,
pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Cricket Teams Ranking in T20</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">India</div>
</div>
<div class = "item-subtitle">Position : 1</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">West Indies</div>
</div>
<div class = "item-subtitle">Position : 2</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">New Zealand</div>
</div>
<div class = "item-subtitle">Position : 3</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">England</div>
</div>
<div class = "item-subtitle">Position : 4</div>
<div class = "item-text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim
lacus tincidunt.</div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Fruits</div>
<div class = "list-block media-list">
<ul>
<li>
<div class = "item-content">
<div class = "item-media"><img src = "/framework7/images/apple.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Apple</div>
</div>
<div class = "item-subtitle">Contains list of antioxidants and essential
nutrients.</div>
</div>
</div>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/orange.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Orange</div>
</div>
<div class = "item-subtitle">It is low in calories, contains no saturated
fats or cholesterol.</div>
</div>
</a>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><img src = "/framework7/images/watermelon.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">Watermelon</div>
</div>
<div class = "item-subtitle">It is a source of Vitamin-A and powerful natural anti-oxidant.</div>
</div>
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Sports</div>
<div class = "list-block media-list inset">
<ul>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/hockey.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">India</div>
</div>
<div class = "item-subtitle">Hockey</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/cricket.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">England</div>
</div>
<div class = "item-subtitle">Cricket</div>
</div>
</a>
</li>
<li>
<a href = "#" class = "item-link item-content">
<div class = "item-media"><img src = "/framework7/images/baseball.jpg" width = "44"></div>
<div class = "item-inner">
<div class = "item-title-row">
<div class = "item-title">United States</div>
</div>
<div class = "item-subtitle">Baseball</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// 此处初始化应用程序
var myApp = new Framework7();
// 如果您使用自定义 DOM 库，则将其保存到 $$ 变量
var $$ = Dom7;
// 添加视图
var mainView = myApp.addView('.view-main', {
// 为该视图启用动态导航栏
dynamicNavbar: true
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 media_list_view.html 文件。
以 http://localhost/media_list_view.html 的形式打开此 HTML 文件，输出如下所示。
该示例显示列表元素以及图像。
framework7_list_views.html
