SwipeAction 滑动菜单，用于滑动操作的组件。 SwipeAction 提供了 wui-swipeaction-group 和 wui-swipe-action 两个组件来组合使用。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 buttons 属性设置菜单按钮，不传则使用默认值，@click 事件为菜单按钮点击事件，@change 事件为切换显示隐藏菜单时触发。

<wui-swipeaction-group>
<!--循环中区分可传参索引值：onClick($event,index) ,也可使用param属性值-->
<wui-swipe-action @click="onClick" @change="change">
  <wui-list-cell :padding="['36rpx','32rpx']" :highlight="false">默认菜单按钮</wui-list-cell>
</wui-swipe-action>
<wui-swipe-action :buttons="buttons" @click="onClick" @change="change">
  <wui-list-cell :padding="['36rpx','32rpx']" :highlight="false">自定义菜单按钮</wui-list-cell>
</wui-swipe-action>
<!--插槽菜单-->
<wui-swipe-action :buttons="buttons">
  <wui-list-cell :padding="['36rpx','32rpx']" :highlight="false">插槽菜单</wui-list-cell>
  <template v-slot:buttons>
    <view class="wui-menu__box">
      <view class="wui-menu__btn">
        <wui-icon name="delete" :size="44"></wui-icon>
      </view>
    </view>
  </template>
</wui-swipe-action>
</wui-swipeaction-group>

const buttons = ref([{
    text: '标为未读',
    background: '#465CFF'
}, {
    text: '删除',
    background: '#FF2B2B'
}])
const onClick = (e)=> {
    console.log(e)
}
const change = (e)=> {
    console.log(e)
}

.wui-menu__box {
	width: 160rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wui-menu__btn {
	width: 88rpx;
	height: 88rpx;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

使用属性控制显示隐藏

通过 show 属性控制滑动菜单显示隐藏。

<wui-swipeaction-group>
	<wui-swipe-action :show="show">
		<wui-list-cell :padding="['36rpx','32rpx']" :highlight="false">默认打开</wui-list-cell>
	</wui-swipe-action>
</wui-swipeaction-group>

const show = ref(true)

//buttons 数据格式说明，以下属性为约定属性值，其他属性可自定义扩展
//温馨提示：使用插槽则buttons属性失效
[{
	//按钮文本
	text: '删除',
	//按钮字体大小，可选
	size: 32,
	//按钮字体颜色，可选
	color: '#fff',
	//按钮背景色
	background: '#FF2B2B'
}]

Slots

wui-swipeaction-group 组件

插槽名称	说明
default	滑动菜单容器，内部由多个wui-swipe-action组件组成

wui-swipe-action 组件

插槽名称	说明
default	显示内容
buttons	自定义菜单按钮，使用插槽则默认按钮失效

Props

wui-swipeaction-group 组件

属性名	类型	说明	默认值	平台差异说明
-	-	-	-	-

wui-swipe-action 组件

属性名	类型	说明	默认值	平台差异说明
buttons	Array	滑动菜单按钮，具体格式见下方说明	[{text: '删除',background: '#FF2B2B'}]	-
size	Number, String	滑动菜单按钮字体大小，单位rpx（优先使用buttons中传值）	32	-
color	String	滑动菜单按钮字体颜色（优先使用buttons中传值）	#fff	-
show	Boolean	是否显示滑动菜单，当 autoClose 为 true 时尽量避免使用该属性	false	-
threshold	Number, String	滑动多少距离菜单展开，单位px	30	-
disabled	Boolean	是否禁止滑动	false	-
autoClose	Boolean	是否自动关闭，打开当前菜单关闭其他菜单	true	-
param	Number, String	自定义参数，事件中回传	0	-

Events

wui-swipeaction-group 组件

事件名	说明	回调参数
-	-	-

wui-swipe-action 组件

事件名	说明	回调参数
@click	点击菜单按钮时触发	{ index:按钮索引, item: ...this.buttons[index], param:自定义参数 }
@change	滑动菜单打开关闭时触发	{ isOpen:是否打开, param:自定义参数 }

Methods

wui-swipeaction-group 组件

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数	返回参数
reset	重置组件样式，改变滑动菜单按钮数据时使用	-	-
close	关闭全部已经打开的滑动菜单	-	-

wui-swipe-action 组件

方法名	说明	传入参数	返回参数
-	-	-	-

导航类型组件