`

移动端安卓和IOS开发框架Framework7教程-列表（表格）

Framework7 
阅读更多

常在iOS应用中看到的列表，是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中，可以将数据划分成不同的片段/组（sections/groups）。

列表有以下用途：

  • 让用户可以浏览结构化的多级数据
  • 展现一个索引列表
  • 在可视化的不同分组中，显示详细信息和控件
  • 展现一个可以选择的列表

列表布局

现在让我们看一下常见的列表布局

列表区（List block）

列表区（List block）是你的列表元素的容器，基本和内容区(Content Block)一样，只不过面向列表元素。

首先, 所有的列表元素都要被包裹在含有“list-block”类的元素中：

  1. <div class="list-block">
  2.     <ul>
  3.         ... list elements here ...
  4.     </ul>
  5. </div>
复制

不要将带有list-block类的元素放置在“content-block”中!

列表区标签（List block label）

你可以将列表区标签（List block label）加在列表区（List block）的末尾：

  1. <div class="list-block">
  2.     <ul>
  3.         ... list elements here ...
  4.     </ul>
  5.     <div class="list-block-label">List block label text</div>
  6. </div>
复制

列表项目（List item/element）

单个列表项目的布局相当复杂而灵活：

  1. <li>
  2.     <div class="item-content">
  3.         <div class="item-media">
  4.             <i class="icon my-icon"></i>
  5.         </div>
  6.         <div class="item-inner">
  7.             <div class="item-title">
  8.                 List element title
  9.             </div>
  10.             <div class="item-after">
  11.                 List element label
  12.             </div>
  13.         </div>
  14.     </div>
  15. </li>
复制

其中：

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

    • item-media - 媒体元素（如图标，图片等）的容器。可选元素。

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

      • item-title - 单行列表项目标题。必选元素。

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

  • 因为.item-content元素的是display属性是flex-box, 需要注意，“item-media”和“item-inner”应该是“item-content”的直接子元素!

  • 同样的，“item-title”和“item-after”应该是“item-inner”的直接子元素!

同时需要注意，如果你的列表项目不含其它元素, 你可以把“item-content”类直接加在<li>元素上：

  1. <li class="item-content">
  2.     <div class="item-media">
  3.         <i class="icon my-icon"></i>
  4.     </div>
  5.     <div class="item-inner">
  6.         <div class="item-title">
  7.             List element title
  8.         </div>
  9.         <div class="item-after">
  10.             List element label
  11.         </div>
  12.     </div>
  13. </li>
复制

示例

  1. <body>
  2.   ...
  3.   <div class="page-content">
  4.     <div class="content-block-title">Full Layout</div>
  5.     <div class="list-block">
  6.       <ul>
  7.         <li class="item-content">
  8.           <div class="item-media"><i class="icon icon-f7"></i></div>
  9.           <div class="item-inner">
  10.             <div class="item-title">Item title</div>
  11.             <div class="item-after">Label</div>
  12.           </div>
  13.         </li>
  14.         <li class="item-content">
  15.           <div class="item-media"><i class="icon icon-f7"></i></div>
  16.           <div class="item-inner">
  17.             <div class="item-title">Item with badge</div>
  18.             <div class="item-after"><span class="badge">5</span></div>
  19.           </div>
  20.         </li>
  21.         <li class="item-content">
  22.           <div class="item-media"><i class="icon icon-f7"></i></div>
  23.           <div class="item-inner">
  24.             <div class="item-title">Another item</div>
  25.             <div class="item-after">Another label</div>
  26.           </div>
  27.         </li>
  28.       </ul>
  29.       <div class="list-block-label">List block label text goes here</div>
  30.     </div>
  31.     <div class="content-block-title">Only titles</div>
  32.     <div class="list-block">
  33.       <ul>
  34.         <li class="item-content">
  35.           <div class="item-inner">
  36.             <div class="item-title">Item title</div>
  37.           </div>
  38.         </li>
  39.         <li class="item-content">
  40.           <div class="item-inner">
  41.             <div class="item-title">Item with badge</div>
  42.           </div>
  43.         </li>
  44.         <li class="item-content">
  45.           <div class="item-inner">
  46.             <div class="item-title">Another item</div>
  47.           </div>
  48.         </li>
  49.       </ul>
  50.     </div>
  51.   </div>
  52. </body>
复制

实例预览

链接元素

当然，多数情况下我们需要将列表中的元素当作链接使用(<a>)，来指向其他页面或者其他数据。在这种情况下，我们需要将“item-content”包裹在<a class="item-link">元素中：

  1. <a href="#" class="item-link">
  2.   <div class="item-content">
  3.     <div class="item-media">...</div>
  4.     <div class="item-inner">...</div>
  5.   </div>
  6. </a>
复制

 

如果你的链接只包含“item-content”，那我们可以直接将链接作为“item-content”：

  1. <a href="#" class="item-link item-content">
  2.   <div class="item-media">...</div>
  3.   <div class="item-inner">...</div>
  4. </a>
复制

注意，当“item-inner”在“item-link”中时，会有额外的右内边距（right padding）和chevron icon

示例

  1. <div class="list-block">
  2.   <ul>
  3.     <li>
  4.       <a href="#" class="item-link item-content">
  5.         <div class="item-media"><i class="icon icon-f7"></i></div>
  6.         <div class="item-inner">
  7.           <div class="item-title">Item title</div>
  8.           <div class="item-after">Label</div>
  9.         </div>
  10.       </a>
  11.     </li>
  12.     <li>
  13.       <a href="#" class="item-link item-content">
  14.         <div class="item-media"><i class="icon icon-f7"></i></div>
  15.         <div class="item-inner">
  16.           <div class="item-title">Item with badge</div>
  17.           <div class="item-after"><span class="badge">5</span></div>
  18.         </div>
  19.       </a>
  20.     </li>
  21.     <li>
  22.       <a href="#" class="item-link item-content">
  23.         <div class="item-media"><i class="icon icon-f7"></i></div>
  24.         <div class="item-inner">
  25.           <div class="item-title">Another item</div>
  26.           <div class="item-after">Another label</div>
  27.         </div>
  28.       </a>
  29.     </li>
  30.   </ul>
  31.   <div class="list-block-label">List block label text goes here</div>
  32. </div>
复制

实例预览

列表分割元素（List Divider）

列表分隔元素是一个简单的列表元素并包含标题，它在视觉上分隔两个列表元素：

  1. <li class="item-divider">Divider title here</li>
复制

 

  1. <div class="list-block">
  2.   <ul>
  3.     <li class="item-content">
  4.       <div class="item-media"><i class="icon icon-f7"></i></div>
  5.       <div class="item-inner">
  6.         <div class="item-title">Item title</div>
  7.         <div class="item-after">Label</div>
  8.       </div>
  9.     </li>
  10.     <li class="item-content">
  11.       <div class="item-media"><i class="icon icon-f7"></i></div>
  12.       <div class="item-inner">
  13.         <div class="item-title">Title</div>
  14.       </div>
  15.     </li>
  16.     <!-- 分隔元素 -->
  17.     <li class="item-divider">Divider title here</li>
  18.     <li class="item-content">
  19.       <div class="item-media"><i class="icon icon-f7"></i></div>
  20.       <div class="item-inner">
  21.         <div class="item-title">Item with badge</div>
  22.         <div class="item-after"><span class="badge">5</span></div>
  23.       </div>
  24.     </li>
  25.     <li class="item-content">
  26.       <div class="item-media"><i class="icon icon-f7"></i></div>
  27.       <div class="item-inner">
  28.         <div class="item-title">Another item</div>
  29.         <div class="item-after">Another label</div>
  30.       </div>
  31.     </li>
  32.   </ul>
  33.   <div class="list-block-label">List block label text goes here</div>
  34. </div>
复制

实例预览

分组列表（Grouped Lists）

有时我们需要将列表区里的元素分组，在这种情况下，我们需要用额外的分组元素：

  1. <div class="list-block">
  2.   <!-- First group-->
  3.   <div class="list-group">
  4.     <ul>
  5.       <li class="list-group-title">First group</li>
  6.       <li class="item-content">
  7.         <div class="item-media"><i class="icon icon-f7"></i></div>
  8.         <div class="item-inner">
  9.           <div class="item-title">Item title</div>
  10.           <div class="item-after">Label</div>
  11.         </div>
  12.       </li>
  13.       <li class="item-content">
  14.         <div class="item-media"><i class="icon icon-f7"></i></div>
  15.         <div class="item-inner">
  16.           <div class="item-title">Item with badge</div>
  17.           <div class="item-after"><span class="badge">5</span></div>
  18.         </div>
  19.       </li>
  20.       ...
  21.     </ul>
  22.   </div>
  23.   <!-- Second group-->
  24.   <div class="list-group">
  25.     <ul>
  26.       <li class="list-group-title">Second Group</li>
  27.       <li class="item-content">
  28.         <div class="item-media"><i class="icon icon-f7"></i></div>
  29.         <div class="item-inner">
  30.           <div class="item-title">Item title</div>
  31.           <div class="item-after">Label</div>
  32.         </div>
  33.       </li>
  34.       <li class="item-content">
  35.         <div class="item-media"><i class="icon icon-f7"></i></div>
  36.         <div class="item-inner">
  37.           <div class="item-title">Item with badge</div>
  38.           <div class="item-after"><span class="badge">5</span></div>
  39.         </div>
  40.       </li>
  41.       ...
  42.     </ul>
  43.   </div>
  44. </div>
复制

实例预览

也许你会问分组元素和分隔元素有什么区别？如果使用了分组元素，当在分组内部滚动时，标题会保持在固定位置。

内嵌列表区域（Inset List Block）

列表区还有内嵌（非全屏）样式，只需要给列表区域元素加上“inset”类：

  1. <div class="list-block inset">
  2.   <ul>
  3.     ...
  4.   </ul>
  5. </div>
    复制

使用“tablet-inset”类，可以使列表区在iPad下以内嵌的方式显示，而在iPhone中以普通样式显示：

  1. <div class="list-block tablet-inset">
  2.   <ul>
  3.     ...
  4.   </ul>
  5. </div>
    复制

实例预览

 

1
顶
5
踩
分享到：
| 移动端安卓和IOS开发框架Framework7教程- ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    iOS开发视频教程

    资源名称：iOS开发视频教程资源目录：【】iOS开发视频教程-第01讲-iOS历史介绍【】iOS开发视频教程-第02讲-XCode安装【】iOS开发视频教程-第03讲-UIView_PPT【】iOS开发视频教程-第04讲-UILabel【】iOS开发视频教程-...

    HTML移动端框架Framework7.zip

    Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。Framework7 使用 Javascript，CSS 和 HTML 来...

    《iOS开发零基础入门教程》（40集）

    资源名称：《iOS开发零基础入门教程》（40集）资源目录：【】传智播客《iOS开发零基础入门教程》1.1【】传智播客《iOS开发零基础入门教程》1.2【】传智播客《iOS开发零基础入门教程》1.3【】传智播客《iOS开发零基础...

    Framework7Vue使用Framework7和Vue构建完整的iOS和Android应用程序

    Framework7是一款免费、开源的移动应用框架，旨在为开发者提供构建iOS和Android应用的全套工具。它提供了丰富的组件库，包括导航、表单、视图、滑块等，使开发者能够轻松实现原生应用的界面和交互效果。 二、Vue.js...

    framework7-icons, Framework7的免费iOS图标字体.zip

    framework7-icons, Framework7的免费iOS图标字体 Framework7图标Framework7的高级和免费ios图标字体。这种字体可以用在 Framework7插件中，但是你可以在任何地方看到它适合它，个人或者商业。 它是免费的使用和许可...

    ios开发 AES-128-ECB加密

    之前遇到的需求，ios上没有类似的实现。搞了好久在网上搜了很多资料都不能解决最后找到了一个c/c++的底层源码，才实现了最后整理了下上传了。是个ios的demo很详细你定能看懂的。运行在xcode环境下，关键算法的文件是...

    PyPI 官网下载 | pyobjc-framework-Cocoa-6.0.1.tar.gz

    Objective-C是苹果公司开发的一种面向对象的编程语言，广泛应用于MacOS和iOS平台的软件开发。Cocoa是Apple为这两种操作系统提供的原生开发框架，包含了大量用于构建图形用户界面、处理事件、管理文件系统等任务的...

    iPhone开发入门到精通视频教程

    iPhone开发入门到精通视频教程资源目录：【】iOS开发源码系列---工具【】iOS开发源码系列---应用【】iOS开发源码系列---游戏【】iOS开发源码系列---类库与框架【】iOS开发真机测试与发布【】iOS开发视频教程01~05...

    IOS开发框架、开发步骤、开发重点技术详细讲解.zip

    IOS开发框架、开发步骤、开发重点技术详细讲解.zip IOS开发框架、开发步骤、开发重点技术详细讲解.zip IOS开发框架、开发步骤、开发重点技术详细讲解.zip IOS开发框架、开发步骤、开发重点技术详细讲解.zip IOS开发...

    IOS应用源码Demo-iOS framework 制作教程【非静态包】-毕设学习.zip

    提供的【应用】★★★★-iOS framework 制作教程【非静态包】源码示例，应该包含了完整的框架创建过程和相关代码，你可以通过阅读和运行这个项目来加深理解。在实践中，你可以尝试修改源代码，添加新的功能，或者...

    UI第一章：无限互联iOS开发教程课件-- iPhone开发入门

    ### UI第一章：无限互联iOS开发教程课件 -- iPhone开发入门 #### iOS系统概述与架构 - **iOS系统**：作为苹果公司专为iPhone、iPod touch及iPad设计的操作系统，iOS自诞生以来就以其简洁易用的特点受到全球用户的...

    Framework7是一个用于构建iOS和Android应用的全功能HTML框架

    Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。

    手机移动端电商,IOS,Android

    总之，手机移动端电商在iOS和Android平台上的实现涉及多方面的技术和策略。从H5页面的构建到原生功能的集成，再到用户体验的优化，每一个环节都需要精心设计和实施。随着技术的不断发展，未来的移动端电商将更加智能...

    Framework7用于构建iOS和Android应用全功能移动HTML框架

    Framework7是一款强大的、免费的HTML5移动应用框架，专为构建具有原生iOS和Android界面风格的混合式移动应用而设计。它允许开发者使用Web技术（如HTML, CSS, JavaScript）来创建高度交互且功能丰富的应用程序，同时...

    移动端兼容安卓IOS的高仿支付密码输入功能

    移动端兼容安卓IOS的高仿支付密码输入功能。 类似支付宝，微信的支付密码功能。

    iOS开发框架

    本资源“iOS开发框架”显然是一个专为学习和开发iOS应用而设计的集合，其中包含了多个有用的工具和示例项目。 1. **CTools使用.rtf**： 这个文件可能是关于`CTools`的使用指南，`CTools`通常是指一套用于iOS开发的...

    ios开发-使用mpass移动开发框架在ios端抓包hook脚本.zip

    "ios开发-使用mpass移动开发框架在ios端抓包hook脚本.zip"是一个针对iOS开发者的重要资源，它包含了一套利用mpass移动开发框架在iOS设备上实现抓包功能的hook脚本。本文将详细介绍如何使用这个框架和脚本来实现iOS端...

    WebRTC.framework iOS Debug arm64与x86-64架构

    iOS Debug环境 arm64与x86_64架构 WebRTC.framework Mach-O universal binary with 2 architectures: [x86_64:Mach-O 64-bit dynamically linked shared library x86_64] [arm64] Mach-O 64-bit dynamically linked ...

    appium-ios-device-自动化-手机自动化-移动端IOS自动化-自动化测试-ios真机驱动

    Appium 是一个流行的开源自动化测试框架，用于移动应用测试，支持iOS和Android平台。在iOS自动化测试领域，Appium 提供了对真实设备和模拟器的控制能力，使得开发者和测试工程师可以编写跨平台的自动化测试脚本。...

Magicbox
Global site tag (gtag.js) - Google Analytics