列表 Vue 组件

列表视图是应用程序中常见且功能强大的用户界面组件。列表视图以可滚动的多行列表形式呈现数据，这些行可以分成多个部分/组。

列表视图有多种用途：

列表 Vue 组件代表 Framework7 的列表视图组件。

列表组件

包含以下组件：

列表属性

属性类型默认描述
<f7-list> 属性
推荐禁用，与嵌套布尔值使列表内嵌。inset-ios和inset-md主题特定布局的属性
xsmall-inset布尔值当应用宽度 >= 480px 时，使列表内嵌。xsmall-inset-ios和xsmall-inset-md主题特定布局的属性
small-inset布尔值当应用宽度 >= 568px 时，使列表内嵌。small-inset-ios和small-inset-md主题特定布局的属性
medium-inset布尔值当应用宽度 >= 768px 时，使列表内嵌。medium-inset-ios和medium-inset-md主题特定布局的属性
large-inset布尔值当应用宽度 >= 1024px 时，使列表内嵌。large-inset-ios和large-inset-md主题特定布局的属性
xlarge-inset布尔值当应用宽度 >= 1200px 时，使列表内嵌。xlarge-inset-ios和xlarge-inset-md主题特定布局的属性
strong布尔值为列表添加额外的高亮显示。strong-ios和strong-md主题特定布局的属性
outline布尔值使列表轮廓（带边框）。outline-ios和outline-md主题特定布局的属性
dividers布尔值在列表项之间添加分隔符（边框）。dividers-ios和dividers-md主题特定布局的属性
媒体列表布尔值false启用媒体列表
链接列表布尔值false启用简化的链接列表
简单列表布尔值false启用简化的简单列表
sortable布尔值false启用可排序列表
可排序-相反布尔值false在相反的一侧（在 LTR 中为左侧）渲染可排序处理程序
可排序-长按布尔值false使列表项在项点击并按住（长按）时可排序。在这种情况下，应用将依赖于自定义taphold event. To make it work correctly, make sure you have also enabled touch.tapHold: true app 参数
可排序-启用布尔值false启用可排序列表的排序
可排序-移动元素布尔值当传递时，它将覆盖相同的sortable.moveElements全局 app 参数。
menuList布尔值启用菜单列表
accordion布尔值false启用折叠列表
折叠-相反布尔值false在相反的一侧（在 LTR 中为左侧）渲染折叠箭头图标
联系人列表布尔值false启用联系人列表通过添加所需的附加类来设置样式
form布尔值false启用<form>在列表块上而不是<div>
表单存储数据布尔值false启用form 存储为当前表单
无 Chevron布尔值false移除嵌套列表项链接的“chevron”图标
Chevron 居中布尔值false将“chevron”图标设置在嵌套媒体列表项的中心（垂直方向）
tab布尔值false当块用作 Tab 时，添加额外的“tab”类
tab-active布尔值false当块用作 Tab 并使其成为活动 Tab 时，添加额外的“tab-active”类
virtual-list布尔值false启用虚拟列表
virtual-list-params对象带有虚拟列表参数
<f7-list-group> 属性
媒体列表布尔值false启用媒体列表为此组
sortable布尔值false启用可排序列表为此组
可排序-长按布尔值false使列表项在项点击并按住（长按）时可排序。在这种情况下，应用将依赖于自定义taphold event. To make it work correctly, make sure you have also enabled touch.tapHold: true app 参数
简单列表布尔值false启用简化的简单列表为此组

列表事件

事件描述
<f7-list> 事件
tab:show当列表块-Tab 变得可见/活动时，将触发事件
tab:hide当列表块-Tab 变得不可见/非活动时，将触发事件
submit当列表用作表单（并启用form属性一起使用）
<f7-list> 可排序特定事件
sortable:enable当可排序模式启用时，将触发事件
sortable:disable当可排序模式禁用时，将触发事件
sortable:sort当用户在新的位置释放当前排序元素后，将触发事件。event.detail将包含具有排序列表项的起始/新索引号的属性的对象from和to properties with start/new index numbers of sorted list item
<f7-list> 虚拟列表特定事件
virtual:itembeforeinsert事件将在项目添加到虚拟文档片段之前触发
virtual:itemsbeforeinsert事件将在当前 DOM 列表被移除之前和新的文档插入之前触发
virtual:itemsafterinsert事件将在带有项目的新文档片段插入之后触发
virtual:beforeclear事件将在当前 DOM 列表被移除并替换为新的文档片段之前触发

列表插槽

列表 Vue 组件 (<f7-list>）具有用于自定义元素的附加插槽：

虚拟列表

关于虚拟列表的用法和示例，请查看虚拟列表 Vue 组件文档。

可排序列表

关于可排序列表的用法和示例，请查看可排序 Vue 组件文档。

折叠列表

关于折叠列表的用法和示例，请查看折叠 Vue 组件文档。

示例

list.vue
<template>
  <f7-page>
    <f7-navbar title="List View" />
    <f7-block>
      <p>
        Framework7 allows you to be flexible with list views (table views). You can make them as
        navigation menus, you can use there icons, inputs, and any elements inside of the list, and
        even make them nested:
      </p>
    </f7-block>
    <f7-block-title>Simple List</f7-block-title>
    <f7-list simple-list dividers-ios>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong List</f7-block-title>
    <f7-list simple-list dividers-ios strong>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong Outline List</f7-block-title>
    <f7-list simple-list dividers-ios strong outline>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong Inset List</f7-block-title>
    <f7-list simple-list dividers-ios strong inset>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Strong Outline Inset List</f7-block-title>
    <f7-list simple-list dividers-ios strong outline inset>
      <f7-list-item title="Item 1" />
      <f7-list-item title="Item 2" />
      <f7-list-item title="Item 3" />
    </f7-list>

    <f7-block-title>Simple Links List</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item title="Link 1" link="#" />
      <f7-list-item title="Link 2" link="#" />
      <f7-list-item title="Link 3" link="#" />
    </f7-list>
    <f7-block-title>Data list, with icons</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="John Doe" badge="5">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="Jenna Smith">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Links</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="John Doe" after="Cleaner">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Jenna Smith">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Links, Header, Footer</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" header="Name" title="John Doe" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" header="Email" title="john@doe" footer="Home" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Links, no icons</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" title="Ivan Petrov" />
      <f7-list-item link="#" title="John Doe" />
      <f7-list-item group-title title="Group Title Here" />
      <f7-list-item link="#" title="Ivan Petrov" />
      <f7-list-item link="#" title="Jenna Smith" />
    </f7-list>

    <f7-block-title>Grouped with sticky titles</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-group>
        <f7-list-item title="A" group-title />
        <f7-list-item title="Aaron " />
        <f7-list-item title="Abbie" />
        <f7-list-item title="Adam" />
      </f7-list-group>
      <f7-list-group>
        <f7-list-item title="B" group-title />
        <f7-list-item title="Bailey" />
        <f7-list-item title="Barclay" />
        <f7-list-item title="Bartolo" />
      </f7-list-group>
      <f7-list-group>
        <f7-list-item title="C" group-title />
        <f7-list-item title="Caiden" />
        <f7-list-item title="Calvin" />
        <f7-list-item title="Candy" />
      </f7-list-group>
    </f7-list>

    <f7-block-title>Mixed and nested</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios>
      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Two icons here">
        <template #media>
          <f7-icon icon="icon-f7" />
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="No icons here" />
      <li>
        <ul>
          <f7-list-item link="#" title="Ivan Petrov" after="CEO">
            <template #media>
              <f7-icon icon="icon-f7" />
            </template>
          </f7-list-item>
          <f7-list-item link="#" title="Two icons here">
            <template #media>
              <f7-icon icon="icon-f7" />
              <f7-icon icon="icon-f7" />
            </template>
          </f7-list-item>
          <f7-list-item title="No icons here" />
          <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
            <template #media>
              <f7-icon icon="icon-f7" />
            </template>
          </f7-list-item>
          <f7-list-item title="With toggle">
            <template #media>
              <f7-icon icon="icon-f7" />
            </template>
            <template #after>
              <f7-toggle />
            </template>
          </f7-list-item>
        </ul>
      </li>
      <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item title="With toggle">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <template #after>
          <f7-toggle />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Tablet inset</f7-block-title>
    <f7-list dividers-ios strong-ios outline-ios medium-inset>
      <f7-list-item link="#" title="Ivan Petrov" after="CEO">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Two icons here">
        <template #media>
          <f7-icon icon="icon-f7" />
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Ultra long text goes here, no, it is really really long">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
      <f7-block-footer>
        <p>This list block will look like "inset" only on tablets (iPad)</p>
      </f7-block-footer>
    </f7-list>

    <f7-block-title>Media Lists</f7-block-title>
    <f7-block>
      <p>
        Media Lists are almost the same as Data Lists, but with a more flexible layout for
        visualization of more complex data, like products, services, users, etc.
      </p>
    </f7-block>
    <f7-block-title>Songs</f7-block-title>
    <f7-list media-list dividers-ios strong-ios outline-ios>
      <f7-list-item
        link="#"
        title="Yellow Submarine"
        after="$15"
        subtitle="Beatles"
        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."
      >
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
            width="80"
          />
        </template>
      </f7-list-item>
      <f7-list-item
        link="#"
        title="Don't Stop Me Now"
        after="$22"
        subtitle="Queen"
        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."
      >
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
            width="80"
          />
        </template>
      </f7-list-item>
      <f7-list-item
        link="#"
        title="Billie Jean"
        after="$16"
        subtitle="Michael Jackson"
        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."
      >
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
            width="80"
          />
        </template>
      </f7-list-item>
    </f7-list>
    <f7-block-title>Mail App</f7-block-title>
    <f7-list media-list dividers-ios strong-ios outline-ios>
      <f7-list-item
        link="#"
        title="Facebook"
        after="17:14"
        subtitle="New messages from John Doe"
        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."
      />
      <f7-list-item
        link="#"
        title="John Doe (via Twitter)"
        after="17:11"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        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."
      />
      <f7-list-item
        link="#"
        title="Facebook"
        after="16:48"
        subtitle="New messages from John Doe"
        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."
      />
      <f7-list-item
        link="#"
        title="John Doe (via Twitter)"
        after="15:32"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        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."
      />
    </f7-list>
    <f7-block-title>Something more simple</f7-block-title>
    <f7-list media-list dividers-ios strong-ios outline-ios>
      <f7-list-item title="Yellow Submarine" subtitle="Beatles">
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"
            width="44"
          />
        </template>
      </f7-list-item>
      <f7-list-item link="#" title="Don't Stop Me Now" subtitle="Queen">
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg"
            width="44"
          />
        </template>
      </f7-list-item>
      <f7-list-item title="Billie Jean" subtitle="Michael Jackson">
        <template #media>
          <img
            style="border-radius: 8px"
            src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
            width="44"
          />
        </template>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Block,
  f7List,
  f7ListItem,
  f7ListGroup,
  f7BlockFooter,
  f7Icon,
  f7Toggle,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7List,
    f7ListItem,
    f7ListGroup,
    f7BlockFooter,
    f7Icon,
    f7Toggle,
  },
};
</script>
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗