赞助商成为赞助商

Swipeout React 组件

Swipeout 列表不是一个单独的组件，而只是使用 <List>、<ListItem swipeout> React 组件和附加 Swipeout 组件的一种特殊情况。

Swipeout React 组件代表 Framework7 的 Swipeout 组件。

Swipeout 组件

包含以下组件

Swipeout 属性

属性类型默认值描述
<SwipeoutActions> 属性
side字符串rightSwipeout 操作侧
right布尔值side="right" 属性的快捷方式
left布尔值side="left" 属性的快捷方式
<SwipeoutButton> 属性
delete布尔值false单击时会自动删除 Swipeout 列表项
close布尔值false单击时会自动关闭 Swipeout 列表项
overswipe布尔值false如果过度滑动操作，则会自动触发单击 - overswipe
text字符串Swipeout 按钮文本标签
confirmText字符串此文本将显示在用户必须同意才能删除项目的对话框中
confirmTitle字符串此文本将显示为用户必须同意才能删除项目的对话框标题

Swipeout 事件

事件描述
<SwipeoutButton> 事件
click单击 Swipeout 按钮时会触发该事件
<ListItem> 事件
以下事件将在启用了 swipeout 的 <ListItem> 上可用
swipeout当您移动 Swipeout 元素时会触发该事件。event.detail.progress 包含当前打开的进度百分比
swipeoutOpen当 Swipeout 元素开始其打开动画时会触发该事件
swipeoutOpened当 Swipeout 元素完成其打开动画后会触发该事件
swipeoutClose当 Swipeout 元素开始其关闭动画时会触发该事件
swipeoutClosed当 Swipeout 元素完成其关闭动画后会触发该事件
swipeoutDelete当 Swipeout 元素开始其删除动画时会触发该事件
swipeoutDeleted当 Swipeout 元素完成其删除动画后会触发该事件，就在它从 DOM 中删除之前
swipeoutOverswipeEnter启用过度滑动时会触发该事件
swipeoutOverswipeExit禁用过度滑动时会触发该事件

示例

swipeout.jsx
import React, { useRef } from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  List,
  ListItem,
  Icon,
  SwipeoutActions,
  SwipeoutButton,
  Block,
  f7,
} from 'framework7-react';

export default () => {
  const actions = useRef(null);
  const more = () => {
    actions.current.open();
  };
  const mark = () => {
    f7.dialog.alert('Mark');
  };
  const reply = () => {
    f7.dialog.alert('Reply');
  };
  const forward = () => {
    f7.dialog.alert('Forward');
  };
  const onDeleted = () => {
    f7.dialog.alert('Thanks, item removed!');
  };
  const onPageBeforeRemove = () => {
    actions.current.destroy();
  };
  const onPageInit = () => {
    actions.current = 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,
          },
        ],
      ],
    });
  };
  return (
    <Page onPageBeforeRemove={onPageBeforeRemove} onPageInit={onPageInit}>
      <Navbar title="Swipeout"></Navbar>

      <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>
      </Block>

      <BlockTitle>Swipe to delete with confirm modal</BlockTitle>
      <List strong insetMd outlineIos dividersIos>
        <ListItem swipeout title="Swipe left on me please">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete confirmText="Are you sure you want to delete this item?">
              Delete
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="Swipe left on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete confirmText="Are you sure you want to delete this item?">
              Delete
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem title="I am not removable">
          <Icon slot="media" icon="icon-f7" />
        </ListItem>
      </List>

      <BlockTitle>Swipe to delete without confirm</BlockTitle>
      <List strong insetMd outlineIos dividersIos>
        <ListItem swipeout title="Swipe left on me please">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="Swipe left on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem title="I am not removable">
          <Icon slot="media" icon="icon-f7" />
        </ListItem>
      </List>

      <BlockTitle>Swipe for actions</BlockTitle>
      <List strong insetMd outlineIos dividersIos>
        <ListItem swipeout title="Swipe left on me please">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="Swipe left on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="You can't delete me">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
      </List>

      <BlockTitle>With callback on remove</BlockTitle>
      <List strong insetMd outlineIos dividersIos>
        <ListItem swipeout onSwipeoutDeleted={onDeleted} title="Swipe left on me please">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout onSwipeoutDeleted={onDeleted} title="Swipe left on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions right>
            <SwipeoutButton delete>Delete</SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem title="I am not removable">
          <Icon slot="media" icon="icon-f7" />
        </ListItem>
      </List>

      <BlockTitle>With actions on left side (swipe to right)</BlockTitle>
      <List strong insetMd outlineIos dividersIos>
        <ListItem swipeout title="Swipe right on me please">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions left>
            <SwipeoutButton color="green" onClick={reply}>
              Reply
            </SwipeoutButton>
            <SwipeoutButton color="blue" onClick={forward}>
              Forward
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem swipeout title="Swipe right on me too">
          <Icon slot="media" icon="icon-f7" />
          <SwipeoutActions left>
            <SwipeoutButton color="green" onClick={reply}>
              Reply
            </SwipeoutButton>
            <SwipeoutButton color="blue" onClick={forward}>
              Forward
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
      </List>

      <BlockTitle>On both sides with overswipes</BlockTitle>
      <List mediaList strong insetMd outlineIos dividersIos>
        <ListItem
          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."
        >
          <SwipeoutActions left>
            <SwipeoutButton overswipe color="green" onClick={reply}>
              Reply
            </SwipeoutButton>
            <SwipeoutButton color="blue" onClick={forward}>
              Forward
            </SwipeoutButton>
          </SwipeoutActions>
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton color="orange" onClick={mark}>
              Mark
            </SwipeoutButton>
            <SwipeoutButton
              delete
              overswipe
              confirmText="Are you sure you want to delete this item?"
            >
              Delete
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem
          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."
        >
          <SwipeoutActions left>
            <SwipeoutButton overswipe color="green" onClick={reply}>
              Reply
            </SwipeoutButton>
            <SwipeoutButton color="blue" onClick={forward}>
              Forward
            </SwipeoutButton>
          </SwipeoutActions>
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton color="orange" onClick={mark}>
              Mark
            </SwipeoutButton>
            <SwipeoutButton
              delete
              overswipe
              confirmText="Are you sure you want to delete this item?"
            >
              Delete
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem
          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."
        >
          <SwipeoutActions left>
            <SwipeoutButton overswipe color="green" onClick={reply}>
              Reply
            </SwipeoutButton>
            <SwipeoutButton color="blue" onClick={forward}>
              Forward
            </SwipeoutButton>
          </SwipeoutActions>
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton color="orange" onClick={mark}>
              Mark
            </SwipeoutButton>
            <SwipeoutButton
              delete
              overswipe
              confirmText="Are you sure you want to delete this item?"
            >
              Delete
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
        <ListItem
          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."
        >
          <SwipeoutActions left>
            <SwipeoutButton overswipe color="green" onClick={reply}>
              Reply
            </SwipeoutButton>
            <SwipeoutButton color="blue" onClick={forward}>
              Forward
            </SwipeoutButton>
          </SwipeoutActions>
          <SwipeoutActions right>
            <SwipeoutButton onClick={more}>More</SwipeoutButton>
            <SwipeoutButton color="orange" onClick={mark}>
              Mark
            </SwipeoutButton>
            <SwipeoutButton
              delete
              overswipe
              confirmText="Are you sure you want to delete this item?"
            >
              Delete
            </SwipeoutButton>
          </SwipeoutActions>
        </ListItem>
      </List>
    </Page>
  );
};
改进此文档
在此页面上