List Vue 组件

列表视图是应用程序中经常发现的多功能且强大的用户界面组件。列表视图以可滚动列表的形式显示数据，其中包含多个行，这些行可能被划分为若干部分/组。

列表视图有多种用途

允许用户浏览分层结构的数据
提供项目索引列表
在视觉上不同的分组中显示详细信息和控件
提供可供选择的选项列表

List Vue 组件表示 Framework7 的列表视图组件。

列表组件

包含以下组件

f7-list - 主列表视图元素
f7-list-group - 列表组元素

列表属性

属性	类型	默认值	说明
<f7-list>属性
inset	布尔值		创建列表内嵌。`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`属性可用于特定主题布局
media-list	布尔值	false	启用媒体列表
links-list	布尔值	false	启用简化的链接列表
simple-list	布尔值	false	启用简化的简单列表
sortable	布尔值	false	启用可排序列表
sortable-opposite	布尔值	false	在另一边呈现可排序处理程序（从左到右的左侧）
sortable-tap-hold	布尔值	false	使列表项在项目轻按和按住（长按）时可排序。在这种情况下，应用将依赖于自定义`taphold`事件。为了使其正常工作，请确保还启用了`touch.tapHold: true` 应用程序参数
sortable-enabled	布尔值	false	启用可排序列表上的排序
sortable-move-elements	布尔值		传递时，它将覆盖相同的`sortable.moveElements`全局应用程序参数。
menuList	布尔值		启用菜单列表
accordion	布尔值	false	启用手风琴式列表
accordion-opposite	布尔值	false	在另一边呈现手风琴式列表人字形图标（从左到右的左侧）
contacts-list	布尔值	false	通过添加必要的附加类目进行样式设置，启用联系人列表
form	布尔值	false	启用列表块上的`<form>`标签，而不是`<div>`
form-store-data	布尔值	false	启用表单存储当前表单
no-chevron	布尔值	false	移除嵌套列表项链接的“人字形”图标
chevron-center	布尔值	false	将嵌套媒体列表项上的“人字形”图标设置到中间位置（垂直方向）
tab	布尔值	false	当块应作为选项卡使用时，添加额外的“选项卡”类
tab-active	布尔值	false	当块用作选项卡并使其成为活动选项卡时，添加额外的“tab-active”类
virtual-list	布尔值	false	启用虚拟列表
virtual-list-params	object		包含虚拟列表参数的对象
<f7-list-group>属性
media-list	布尔值	false	为此组启用媒体列表
sortable	布尔值	false	为此组启用可排序列表
sortable-tap-hold	布尔值	false	使列表项在项目轻按和按住（长按）时可排序。在这种情况下，应用将依赖于自定义`taphold`事件。为了使其正常工作，请确保还启用了`touch.tapHold: true` 应用程序参数
simple-list	布尔值	false	为此组启用简化的简单列表

列表事件

事件	说明
<f7-list>事件
tab:show	当列表块选项卡变为可见/激活时，将触发事件
tab:hide	当列表块选项卡变为不可见/不活动时，将触发事件
submit	当带有已启用 `form` 属性的列表用作表单时，在列表表单提交时触发事件
<f7-list>可排序特定事件
sortable:enable	在可排序模式启用时触发事件
sortable:disable	在可排序模式禁用时触发事件
sortable:sort	当用户松开当前正在新位置排序的元素后触发事件。`event.detail` 将包含一个对象，其中包含已排序列表项的开始/新索引编号的 `from` 和 `to` 属性
<f7-list>虚拟列表特定事件
virtual:itembeforeinsert	在项目添加到虚拟文档片段之前触发事件
virtual:itemsbeforeinsert	在移除当前 DOM 列表并在插入新文档之前触发事件
virtual:itemsafterinsert	在插入包含项目的文档片段之后触发事件
virtual:beforeclear	在移除当前 DOM 列表并用新文档片段替换之前触发事件

列表插槽

列表 Vue 组件（`<f7-list>`）有额外的插槽可用于自定义元素

before-list - 元素将插入到列表视图的开头和 `<ul>` 主列表之前
after-list - 元素将插入到列表视图的末尾和 `<ul>` 主列表之后
list - 元素将插入到 `<ul>` 主列表元素内

虚拟列表

有关虚拟列表使用和示例，请查看虚拟列表 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>

改进此文档

此页面

列表组件
列表属性
列表事件
列表插槽
虚拟列表
可排序列表
手风琴列表
示例