列表项 Vue 组件

列表项组件

包含以下组件

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

列表项属性

属性	类型	默认	描述
<f7-list-item> 属性
title	字符串		列表项标题
subtitle	字符串		列表项副标题（仅适用于媒体列表）
text	字符串		列表项文本（仅适用于媒体列表）
header	字符串		列表项头文本
footer	字符串		列表项尾文本
media	字符串		列表项媒体图片网址
after	字符串		列表项标签
badge	字符串数字		列表项徽章
badge-color	字符串		列表项徽章颜色。其中之一默认颜色
媒体项目	布尔		为当前列表项启用媒体列表项
组标题	布尔		将列表项转换为列表组标题
目标	布尔		列表项链接目标属性
无短箭头	布尔	false	移除列表项链接上的“短箭头”图标
短箭头居中	布尔	false	（垂直方向）将媒体列表项上的“短箭头”图标设置为居中
工具提示	字符串		将鼠标悬停/按下按钮上时显示的列表按钮工具提示文本
工具提示触发器	字符串	悬停	定义如何触发（打开）工具提示。可以是`hover`、`click`或`manual`
<f7-list-item> 菜单列表特定属性
已选择	布尔		菜单列表项是否已选择（当前激活）
<f7-list-item> 滑动退出特定属性
滑动退出	布尔		将列表项转换为滑动退出列表项
滑动退出已打开	布尔		定义滑动操作是否应打开或不打开。注意，同一时间只能打开一个滑动退出项
<f7-list-item> 手风琴特定属性
手风琴项	布尔	false	将列表项转换为手风琴列表项
手风琴项已打开	布尔	false	打开手风琴项
<f7-list-item> 可排序列表特定属性
可排序	布尔		允许禁用（当`false`）特定列表项的排序。注意，这对列表中的第一个或最后一个条目有意义且只对这些条目有效，如果您禁用中间某几个条目的可排序，则无法正常工作。
<f7-list-item> 虚拟列表特定属性
虚拟列表索引	数字		当在虚拟列表中使用时，允许传递列表项索引（从整个集合）。与可排序一起使用，得知正确的已更改索引非常有用
<f7-list-item> 智能选择特定属性
智能选择	布尔	false	启用智能选择行为
智能选择参数	对象		带有智能选择参数的对象
<f7-list-item> 复选框和单选框特定属性
复选框	布尔	false	启用复选框项
复选框图标	字符串		允许指定复选框图标的位置 - 在列表项的开头或结尾。可以是`start`或`end`。默认情况下，复选框列表项图标显示在列表项的开头。
单选按钮	布尔	false	启用单选按钮项
单选按钮图标	字符串		允许指定单选按钮图标的位置 - 在列表项的开头或结尾。可以是`start`或`end`。默认情况下，单选按钮列表项图标显示在列表项的结尾（对于 iOS 主题）或列表项的开头（对于 MD 主题）。
已选中	布尔	false	复选框/单选按钮输入是否已选中
不确定	布尔		定义复选框输入是否处于不确定状态
名称	字符串		复选框/单选按钮输入名称
值	字符串数字		复选框/单选按钮输入值
只读	布尔	false	复选框/单选按钮输入是否为只读
已禁用	布尔	false	复选框/单选按钮输入是否已禁用
必需	布尔	false	是否需要复选框/单选框输入
<f7-list-item> navigation/router 相关的配置
link	布尔字符串		如果指定为字符串，则启用链接和链接 URL。与 `href` 配置相同
tab-link	字符串布尔		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tab-link-active	布尔		将此选项卡链接设为活动状态
href	字符串布尔	#	要加载的页面的 URL。如果是布尔值 `href="false"`，则不会添加 `href` 标记
目标	字符串		链接目标属性的值，例如 `_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	字符串		自定义页面过渡的名称
ignore-cache	布尔		忽略缓存
route-tab-id	字符串		可路由选项卡 ID
route-props	对象		包含将传递给目标路线组件的附加配置的对象
prevent-router	布尔	false	如果设置，则不会由 Framework7 路由器处理
<f7-list-item> 操作相关的配置
panel-open	字符串布尔		单击时要打开的面板的 CSS 选择器。或者如果 DOM 中只有左侧或右侧面板，则可以是 `left` 或 `right`
panel-close	字符串布尔		单击时关闭面板
panel-toggle	字符串布尔		单击时要切换的面板的 CSS 选择器。或者如果 DOM 中只有左侧或右侧面板，则可以是 `left` 或 `right`
actions-open	字符串布尔		单击时要打开的操作表的 CSS 选择器
actions-close	字符串布尔		单击时要关闭的操作表的 CSS 选择器。或用于关闭当前打开的操作表的布尔属性
popup-open	字符串布尔		单击时要打开的弹出窗口的 CSS 选择器
popup-close	字符串布尔		单击时要关闭的弹出窗口的 CSS 选择器。或用于关闭当前打开的弹出窗口的布尔属性
popover-open	字符串布尔		单击时要打开的弹出层的 CSS 选择器
popover-close	字符串布尔		单击时要关闭的弹出层的 CSS 选择器。或用于关闭当前打开的弹出层的布尔属性
sheet-open	字符串布尔		单击时要打开的 sheet 模态的 CSS 选择器
sheet-close	字符串布尔		关闭单击 Sheet 模态框的 CSS 选择器。或关闭当前打开的 Sheet 模态框的布尔属性
login-screen-open	字符串布尔		单击打开登录屏幕的 CSS 选择器
login-screen-close	字符串布尔		关闭单击登录屏幕的 CSS 选择器。或关闭当前打开的登录屏幕的布尔属性
sortable-enable	字符串布尔		单击启用 Sortable 列表的 CSS 选择器
sortable-disable	字符串布尔		单击禁用 Sortable 列表的 CSS 选择器。或关闭当前打开的 Sortable 列表的布尔属性
sortable-toggle	字符串布尔		单击切换 Sortable 列表的 CSS 选择器。或切换当前打开/关闭 Sortable 列表的布尔属性
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”事件时触发事件
滑动退出	在移动轻扫元素时触发事件。第一个处理程序参数包含包含当前打开进度百分比的`progress`对象
swipeout:open	轻扫元素开始其打开动画时触发事件
swipeout:opened	轻扫元素完成其打开动画后触发事件
swipeout:close	轻扫元素开始其关闭动画时触发事件
swipeout:closed	轻扫元素完成其关闭动画后触发事件
swipeout:delete	轻扫元素开始其删除动画后触发事件
swipeout:deleted	轻扫元素完成其删除动画，在从 DOM 中移除之前触发事件
accordion:beforeopen	手风琴内容开始其打开动画之前触发事件。第一个处理程序参数接收`prevent`函数，该函数在调用时可防止手风琴打开。
accordion:open	手风琴内容开始其打开动画时触发事件。
accordion:opened	在手风琴内容完成打开动画后将触发事件。
accordion:beforeclose	手风琴内容开始关闭动画前将触发事件。第一个处理程序参数接收 `prevent` 函数，在调用时防止手风琴关闭。
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>

改善此文档

在此页面

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