赞助商成为赞助商

滑出 Vue 组件

滑出列表不是独立的组件，而只是使用 <f7-list>、<f7-list-item swipeout> Vue 组件和其他滑出组件的特例。

滑出 Vue 组件表示 Framework7 的 滑出 组件。

滑出组件

以下组件已包含

滑出属性

属性类型默认描述
<f7-swipeout-actions> 属性
side字符串right滑出操作侧
right布尔值side="right" 属性的快捷方式
left布尔值side="left" 属性的快捷方式
<f7-swipeout-button> 属性
delete布尔值false点击时将自动删除 swipeout 列表项
close布尔值false点击时将自动关闭 swipeout 列表项
overswipe布尔值false如果您对动作滑动过多，将自动触发点击 - overswipe
text字符串Swipeout 按钮文本标签
confirm-text字符串此文本将显示在对话框中，用户必须在此处同意，然后才能删除项目
confirm-title字符串此文本将显示为对话框标题，用户必须在此处同意，然后才能删除项目

Swipeout 事件

事件描述
<f7-swipeout-button> 事件
click事件将在 swipeout 按钮点击时触发
<f7-list-item> 事件
当启用 swipeout 时，将可在 <f7-list-item> 上使用以下事件
swipeout当您移动 swipeout 元素时，将触发事件。event.detail.progress 包含当前打开的进度百分比
swipeout:open当 swipeout 元素开始执行其打开动画时，将触发事件
swipeout:opened当 swipeout 元素完成其打开动画后，将触发事件
swipeout:close当 swipeout 元素开始执行其关闭动画时，将触发事件
swipeout:closed当 swipeout 元素完成其关闭动画后，将触发事件
swipeout:delete当 swipeout 元素开始执行其删除动画时，将触发事件
swipeout:deleted当 swipeout 元素完成其删除动画并在 DOM 中移除之前，将触发事件
swipeout:overswipeenter当启用 overswipe 时触发事件
swipeout:overswipeexit当禁用 overswipe 时触发事件

示例

swipeout.vue
<template>
  <f7-page @page:beforeremove="onPageBeforeRemove" @page:init="onPageInit">
    <f7-navbar title="Swipeout"></f7-navbar>

    <f7-block>
      <p>
        Swipe out actions on list elements is one of the most awesome F7 features. It allows you to
        call hidden menu for each list element where you can put default ready-to use delete button
        or any other buttons for some required actions.
      </p>
    </f7-block>

    <f7-block-title>Swipe to delete with confirm modal</f7-block-title>
    <f7-list strong inset-md dividers-ios outline-ios>
      <f7-list-item swipeout title="Swipe left on me please">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button delete confirm-text="Are you sure you want to delete this item?"
            >Delete</f7-swipeout-button
          >
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item swipeout title="Swipe left on me too">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button delete confirm-text="Are you sure you want to delete this item?"
            >Delete</f7-swipeout-button
          >
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item title="I am not removable">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Swipe to delete without confirm</f7-block-title>
    <f7-list strong inset-md dividers-ios outline-ios>
      <f7-list-item swipeout title="Swipe left on me please">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button delete>Delete</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item swipeout title="Swipe left on me too">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button delete>Delete</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item title="I am not removable">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Swipe for actions</f7-block-title>
    <f7-list strong inset-md dividers-ios outline-ios>
      <f7-list-item swipeout title="Swipe left on me please">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="more">More</f7-swipeout-button>
          <f7-swipeout-button delete>Delete</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item swipeout title="Swipe left on me too">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="more">More</f7-swipeout-button>
          <f7-swipeout-button delete>Delete</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item swipeout title="You can't delete me">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="more">More</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
    </f7-list>

    <f7-block-title>With callback on remove</f7-block-title>
    <f7-list strong inset-md dividers-ios outline-ios>
      <f7-list-item swipeout title="Swipe left on me please" @swipeout:deleted="onDeleted">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button delete>Delete</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item swipeout title="Swipe left on me too" @swipeout:deleted="onDeleted">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions right>
          <f7-swipeout-button delete>Delete</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item title="I am not removable">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
      </f7-list-item>
    </f7-list>

    <f7-block-title>With actions on left side (swipe to right)</f7-block-title>
    <f7-list strong inset-md dividers-ios outline-ios>
      <f7-list-item swipeout title="Swipe right on me please">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions left>
          <f7-swipeout-button color="green" @click="reply">Reply</f7-swipeout-button>
          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item swipeout title="Swipe right on me too">
        <template #media>
          <f7-icon icon="icon-f7" />
        </template>
        <f7-swipeout-actions left>
          <f7-swipeout-button color="green" @click="reply">Reply</f7-swipeout-button>
          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>
    </f7-list>

    <f7-block-title>On both sides with overswipes</f7-block-title>
    <f7-list media-list strong inset-md outline-ios dividers-ios>
      <f7-list-item
        swipeout
        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-swipeout-actions left>
          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
        </f7-swipeout-actions>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="more">More</f7-swipeout-button>
          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
          <f7-swipeout-button
            delete
            overswipe
            confirm-text="Are you sure you want to delete this item?"
            >Delete</f7-swipeout-button
          >
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item
        swipeout
        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-swipeout-actions left>
          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
        </f7-swipeout-actions>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="more">More</f7-swipeout-button>
          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
          <f7-swipeout-button
            delete
            overswipe
            confirm-text="Are you sure you want to delete this item?"
            >Delete</f7-swipeout-button
          >
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item
        swipeout
        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-swipeout-actions left>
          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
        </f7-swipeout-actions>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="more">More</f7-swipeout-button>
          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
          <f7-swipeout-button
            delete
            overswipe
            confirm-text="Are you sure you want to delete this item?"
            >Delete</f7-swipeout-button
          >
        </f7-swipeout-actions>
      </f7-list-item>
      <f7-list-item
        swipeout
        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-swipeout-actions left>
          <f7-swipeout-button overswipe color="green" @click="reply">Reply</f7-swipeout-button>
          <f7-swipeout-button color="blue" @click="forward">Forward</f7-swipeout-button>
        </f7-swipeout-actions>
        <f7-swipeout-actions right>
          <f7-swipeout-button @click="more">More</f7-swipeout-button>
          <f7-swipeout-button color="orange" @click="mark">Mark</f7-swipeout-button>
          <f7-swipeout-button
            delete
            overswipe
            confirm-text="Are you sure you want to delete this item?"
            >Delete</f7-swipeout-button
          >
        </f7-swipeout-actions>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7List,
  f7ListItem,
  f7Icon,
  f7SwipeoutActions,
  f7SwipeoutButton,
  f7Block,
  f7,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7List,
    f7ListItem,
    f7Icon,
    f7SwipeoutActions,
    f7SwipeoutButton,
    f7Block,
  },
  methods: {
    more() {
      const self = this;
      self.actions.open();
    },
    mark() {
      f7.dialog.alert('Mark');
    },
    reply() {
      f7.dialog.alert('Reply');
    },
    forward() {
      f7.dialog.alert('Forward');
    },
    onDeleted() {
      f7.dialog.alert('Thanks, item removed!');
    },
    onPageBeforeRemove() {
      const self = this;
      self.actions.destroy();
    },
    onPageInit() {
      const self = this;
      self.actions = f7.actions.create({
        buttons: [
          [
            {
              text: 'Here comes some optional description or warning for actions below',
              label: true,
            },
            {
              text: 'Action 1',
            },
            {
              text: 'Action 2',
            },
          ],
          [
            {
              text: 'Cancel',
              strong: true,
            },
          ],
        ],
      });
    },
  },
};
</script>
改进此文档
本页上