列表项 Vue 组件

列表项组件

包含以下组件：

f7-list-item- 主列表项元素

列表项属性

属性	类型	默认	描述
<f7-list-item> 属性
title	字符串		列表项标题
subtitle	字符串		列表项副标题（仅适用于媒体列表）
text	字符串		列表项文本（仅适用于媒体列表）
头部	字符串		列表项头部文本
尾部	字符串		列表项尾部文本
media	字符串		列表项媒体图像 URL
后置	字符串		列表项标签
badge	字符串数字		列表项徽章
badge-color	字符串		列表项徽章颜色。可以是默认颜色之一
media-item	布尔值		启用当前列表项的媒体列表项
group-title	布尔值		将列表项转换为列表组标题
target	布尔值		列表项链接目标属性
无 Chevron	布尔值	false	移除列表项链接上的“箭头”图标
Chevron 居中	布尔值	false	将媒体列表项上的“箭头”图标设置为居中（垂直）
提示	字符串		列表按钮提示按钮悬停/按下时显示的文本
tooltip-trigger	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`
<f7-list-item> 菜单列表特定属性
selected	布尔值		菜单列表项是否选中（当前激活）
<f7-list-item> Swipeout 特定属性
swipeout	布尔值		将列表项转换为滑动删除列表项
swipeout-opened	布尔值		定义是否应打开滑动操作。注意，同一时间只能有一个滑动删除项被打开
<f7-list-item> 手风琴特定属性
accordion-item	布尔值	false	将列表项转换为手风琴列表项
accordion-item-opened	布尔值	false	使手风琴项打开
<f7-list-item> 可排序列表特定属性
sortable	布尔值		允许禁用（当`false`）特定列表项的排序。注意，这只有在列表的第一项或最后一项上才有意义，并且如果中间的一些项被禁用排序，则无法正确工作。
<f7-list-item> 虚拟列表特定属性
virtual-list-index	数字		允许在虚拟列表中使用时传递列表项索引（来自整个集合）。与可排序一起使用时很有用，以知道正确的更改索引
<f7-list-item> 智能选择特定属性
smart-select	布尔值	false	启用智能选择行为
smart-select-params	对象		带有智能选择参数
<f7-list-item> 复选框和单选按钮特定属性
checkbox	布尔值	false	启用复选框项
checkbox-icon	字符串		允许指定复选框图标位置 - 在列表项的开头或结尾。可以是`start`或`end`。默认情况下，复选框列表项图标显示在列表项的开头。
radio	布尔值	false	启用单选按钮项
radio-icon	字符串		允许指定单选按钮图标位置 - 在列表项的开头或结尾。可以是`start`或`end`。默认情况下，iOS 主题中的单选按钮列表项图标显示在列表项的结尾，MD 主题中的单选按钮列表项图标显示在列表项的开头。
已选中	布尔值	false	复选框/单选按钮输入是否被选中
indeterminate	布尔值		定义复选框输入是否处于不确定状态
name	字符串		复选框/单选按钮输入名称
值	字符串数字		复选框/单选按钮输入值
只读	布尔值	false	复选框/单选按钮输入是否只读
禁用	布尔值	false	复选框/单选按钮输入是否禁用
required	布尔值	false	复选框/单选按钮输入是否必需
<f7-list-item> 导航/路由相关属性
link	布尔值字符串		启用链接和链接 URL（如果指定为字符串）。与`href`prop
tab-link	字符串布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tab-link-active	布尔值		使此选项卡链接处于活动状态
href	字符串布尔值	#	要加载的页面的 URL。如果是布尔值`href="false"`则不会添加`href`tag
target	字符串		链接目标属性值，例如`_blank`, `_self`，等等。
view	字符串		要加载页面的视图的 CSS 选择器。或者`current`在当前视图中加载。
external	布尔值		启用以绕过 Framework7 的链接点击处理程序
back	布尔值		启用返回导航链接
open-in	字符串		允许将页面路由作为模态或面板打开。可以是`popup`, `loginScreen`, `sheet`, `popover`或`panel`
force	布尔值		强制页面加载并忽略历史记录中的先前页面（与`back`属性一起使用）
reload-current	布尔值		重新加载新页面而不是当前活动的页面
reload-previous	布尔值		用路由中的新页面替换历史记录中的先前页面
reload-all	布尔值		加载新页面并从历史记录和 DOM 中删除所有先前页面
reload-detail	布尔值		在主/详细信息视图中重新加载详细信息页面
animate	布尔值		禁用页面动画
transition	字符串		自定义页面过渡的名称custom page transition
ignore-cache	布尔值		忽略缓存
route-tab-id	字符串		可路由选项卡 ID
route-props	对象		将传递给目标路由组件的附加属性对象
prevent-router	布尔值	false	如果设置，则不会被 Framework7 路由器处理
<f7-list-item> 操作相关属性
panel-open	字符串布尔值		点击时打开的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
panel-close	字符串布尔值		点击时关闭面板
panel-toggle	字符串布尔值		点击时切换的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
actions-open	字符串布尔值		点击时打开的操作表的 CSS 选择器
actions-close	字符串布尔值		点击时关闭的操作表的 CSS 选择器。或者为关闭当前打开的操作表的布尔属性
popup-open	字符串布尔值		点击时打开的弹出的 CSS 选择器
popup-close	字符串布尔值		点击时关闭的弹出的 CSS 选择器。或者为关闭当前打开的弹出的布尔属性
popover-open	字符串布尔值		点击时打开的弹出窗口的 CSS 选择器
popover-close	字符串布尔值		点击时关闭的弹出窗口的 CSS 选择器。或者为关闭当前打开的弹出窗口的布尔属性
sheet-open	字符串布尔值		点击时打开的表单模态的 CSS 选择器
sheet-close	字符串布尔值		点击时关闭的表单模态的 CSS 选择器。或者为关闭当前打开的表单模态的布尔属性
login-screen-open	字符串布尔值		点击时打开的登录屏幕的 CSS 选择器
login-screen-close	字符串布尔值		点击时关闭的登录屏幕的 CSS 选择器。或者为关闭当前打开的登录屏幕的布尔属性
sortable-enable	字符串布尔值		点击时启用的可排序列表的 CSS 选择器
sortable-disable	字符串布尔值		点击时禁用的可排序列表的 CSS 选择器。或者为关闭当前打开的可排序列表的布尔属性
sortable-toggle	字符串布尔值		点击时切换的可排序列表的 CSS 选择器。或者为切换当前打开/关闭的可排序列表的布尔属性
searchbar-enable	字符串布尔值		点击时启用的可展开搜索栏的 CSS 选择器。或者为启用第一个找到的搜索栏的布尔属性
searchbar-disable	字符串布尔值		点击时禁用的可展开搜索栏的 CSS 选择器。或者为禁用第一个找到的搜索栏的布尔属性
searchbar-toggle	字符串布尔值		点击时切换的可展开搜索栏的 CSS 选择器。或者为切换第一个找到的搜索栏的布尔属性
searchbar-clear	字符串布尔值		点击时清除的可展开搜索栏的 CSS 选择器。或者为清除第一个找到的搜索栏的布尔属性
card-open	字符串布尔值		点击时打开的可展开卡片的 CSS 选择器。或者为打开第一个找到的可展开卡片的布尔值
card-close	字符串布尔值		点击时关闭的可展开卡片的 CSS 选择器。或者为关闭当前打开的可展开卡片的布尔属性
card-prevent-open	布尔值		具有此属性的元素点击不会打开其父可展开卡片

列表项事件

事件	描述
<f7-list-item> 事件
click	当用户点击列表项时将触发事件
change	当列表项输入（单选按钮或复选框）发生“change”事件时将触发事件
swipeout	当移动滑动删除元素时将触发事件。第一个处理程序参数包含当前打开的进度百分比的`progress`对象
swipeout:open	当滑动删除元素开始其打开动画时将触发事件
swipeout:opened	当滑动删除元素完成其打开动画后触发事件
swipeout:close	当滑动删除元素开始其关闭动画时将触发事件
swipeout:closed	当滑动删除元素完成其删除动画后触发事件
swipeout:delete	当滑动删除元素开始其删除动画后触发事件
swipeout:deleted	当滑动删除元素完成其删除动画后触发事件，就在它将被从 DOM 中移除之前
accordion:beforeopen	事件将在手风琴内容开始打开动画之前触发。第一个处理器参数接收一个函数，调用时将阻止手风琴打开。`prevent`accordionOpen
accordion:open	事件将在手风琴内容开始打开动画时触发。
accordion:opened	事件将在手风琴内容完成打开动画后触发。
accordion:beforeclose	事件将在手风琴内容开始关闭动画之前触发。第一个处理器参数接收一个函数，调用时将阻止手风琴关闭。`prevent`accordionClose
accordion:close	事件将在手风琴内容开始关闭动画时触发。
accordion:closed	事件将在手风琴内容完成关闭动画后触发。

列表项插槽

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

root-start- 元素将被插入到<li>元素之前插入元素
root / root-end- 元素将被插入到<li>元素之前插入元素
content-start- 元素将被插入到<div class="item-content">元素之前插入元素
content / content-end- 元素将被插入到<div class="item-content">元素之前插入元素
inner-start- 元素将被插入到<div class="item-inner">元素之前插入元素
default / inner / inner-end- 元素将被插入到<div class="item-inner">元素之前插入元素
media- 元素将被插入到<div class="item-media">元素之前插入元素
before-title- 元素将插入到<div class="item-title">元素之前插入元素
title- 元素将被插入到<div class="item-title">元素之前插入元素
after-title- 元素将插入到<div class="item-title">元素之前插入元素
subtitle- 元素将被插入到<div class="item-subtitle">元素之前插入元素
text- 元素将被插入到<div class="item-text">元素之前插入元素
header- 元素将被插入到<div class="item-header">元素之前插入元素
footer- 元素将被插入到<div class="item-footer">元素之前插入元素
after-start- 元素将被插入到<div class="item-after">元素之前插入元素
after / after-end- 元素将被插入到<div class="item-after">元素之前插入元素

<f7-list media-list>
  <f7-list-item
    link="/home/"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Text"
    after="Read more"
    >
      <img src="path-to-my-image.jpg" slot="media">
      <div slot="root-start">Root Start</div>
      <div slot="root">Root End</div>
      <div slot="content-start">Content Start</div>
      <div slot="content">Content End</div>
      <div slot="media-start">Media Start</div>
      <div slot="media">Media</div>
      <span slot="after-start">After Start</span>
      <span slot="after">After End</span>
      <div slot="inner-start">Inner Start</div>
      <div slot="inner">Inner End</div>
      <div slot="before-title">Before Title</div>
      <div slot="after-title">After Title</div>
  </f7-list-item>
</f7-list>

<!-- Renders to: -->

<div class="list media-list">
  <ul>
    <li>
      <div>Root Start</div>
      <a href="/home/" class="item-link">
        <div class="item-content">
          <div>Content Start</div>
          <div class="item-media">
            <img src="path-to-my-image.jpg">
          </div>
          <div class="item-inner">
            <div>Inner Start</div>
            <div class="item-title-row">
              <div>Before Title</div>
              <div class="item-title">Item Title</div>
              <div>After Title</div>
              <div class="item-after">
                <span>After Start</span>
                <span>Read more</span>
                <span>After End</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div>Inner End</div>
          </div>
          <div>Content End</div>
        </div>
      </a>
      <div>Root End</div>
    </li>
  </ul>
</div>

示例

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>

改进此文档

在本页上

列表项组件
列表项属性
列表项事件
列表项插槽
示例