SwipeMenu 3.0.0

滑动菜单组件。

  • 支持向右或向左单向滑动，显示菜单按钮。
  • 默认拖动距离超过菜单按钮的一半时，组件自动打开，否则组件回到关闭状态。
  • 组件拖动条可拖离足够远位置。
  • 组件处于开启状态时，下次拖动不作响应，且组件会自动关闭，可通过轻点方式来关闭组件。
使用说明

引用方式

import { SwipeMenu } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import SwipeMenu from 'yo3/component/swipemenu';

基本用法

最简单用法，提供显示菜单选项数组。text属性是菜单按钮文字，onTap属性绑定点击按钮的回调函数。

<SwipeMenu
  action={[
    {
      text: 'delete',
      onTap: () => console.log('click delete')
    }
  ]}
>
  <p>要不要左滑试试?</p>
</SwipeMenu>

向右滑动

通过 direction 属性设置滑动方向，默认向左滑动。

<SwipeMenu
  action={[
    {
      text: 'delete',
      onTap: () => console.log('click delete')
    }
  ]}
  direction="right"
>
    <p>要不要左滑试试?</p>
</SwipeMenu>

不可用

通过 disable 属性，设置组件不可用状态。此时组件不能滑动。

<SwipeMenu
    action={[
      {
        text: 'delete',
        onTap: () => console.log('click delete')
      }
    ]}
    disable={false}
>
  <p>要不要左滑试试?</p>
</SwipeMenu>
属性

action { Array } #

组件打开状态显示菜单内容，额外类名，回调函数

  • PropTypes.arrayOf(
   PropTypes.shape({
       text: PropTypes.string.isRequired,
       className: PropTypes.string,
       onTap: PropTypes.func.isRequired
   })
)

默认值: []

open { Bool } #

默认组件是否打开

默认值: false

direction { Enum {'left', 'right'} } #

组件可以拖动的方向

默认值: left

extraClass { String } #

组件的额外样式类

disable { Bool } #

组件是否不可用

默认值: false

方法

onTouchStart #

touchStart时期触发的回调

onTouchMove #

touchMove时期触发的回调

onTouchEnd #

touchEnd时期触发的回调

onOpen #

组件打开时期触发的回调

onClose #

组件关闭时期触发的回调

open #

打开SwipeMenu，能够接收一个参数，表示是否有过渡动画效果。

方法参数:

参数名 类型 描述 必选 支持版本
isClearTransition Boolean

close #

关闭SwipeMenu，能够接收一个参数，表示是否有过渡动画效果。

方法参数:

参数名 类型 描述 必选 支持版本
isClearTransition Boolean