媒体列表视图（Media List View）
优质
小牛编辑
131浏览
2023-12-01
描述 (Description)
媒体使用列表视图，显示一个类似的产品，服务和用户信息的复杂的数据结构。
可以通过使用在使用列表视图的中间item-content的类，它是用于主包装item-media （用于中心元素）和item-inner （包括标题，标题，文本元素）类。
例子 (Example)
以下示例显示在列表视图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>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>
输出 (Output)
让我们来进行上面给出看看代码是如何工作的以下步骤 -
保存上面给出的HTML代码media_list_view.html文件服务器在你的根文件夹。
打开这个HTML文件为http://localhost/media_list_view.html和如下所示被显示的输出。
该示例显示与图像一起列表元素。