# SwipeAction 滑动菜单

概述

SwipeAction 滑动菜单,用于滑动操作的组件。

SwipeAction 提供了 fui-swipeaction-group 和 fui-swipe-action 两个组件来组合使用。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiSwipeactionGroup from "@/components/firstui/fui-swipeaction-group/fui-swipeaction-group.vue"
import fuiSwipeAction from "@/components/firstui/fui-swipe-action/fui-swipe-action.vue"
export default {
	components:{
		fuiSwipeactionGroup,
		fuiSwipeAction
	}
}
1
2
3
4
5
6
7
8
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API(以下示例写于.vue页面中)。
基础使用

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

<fui-swipeaction-group>
	<!--循环中区分可传参索引值:onClick($event,index) ,也可使用param属性值-->
	<fui-swipe-action @click="onClick" @change="change">
		<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">默认菜单按钮</fui-list-cell>
	</fui-swipe-action>
	<fui-swipe-action :buttons="buttons" @click="onClick" @change="change">
		<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">自定义菜单按钮</fui-list-cell>
	</fui-swipe-action>
	<!--插槽菜单-->
	<fui-swipe-action :buttons="buttons">
		<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">插槽菜单</fui-list-cell>
		<template v-slot:buttons>
			<view class="fui-menu__box">
				<view class="fui-menu__btn">
					<fui-icon name="delete" :size="44"></fui-icon>
				</view>
			</view>
		</template>
	</fui-swipe-action>
</fui-swipeaction-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data() {
	return {
		buttons: [{
			text: '标为未读',
			background: '#465CFF'
		}, {
			text: '删除',
			background: '#FF2B2B'
		}]
	}
},
methods: {
	onClick(e) {
		console.log(e)
		this.fui.toast(e.item.text)
	},
	change(e) {
		console.log(e)
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.fui-menu__box {
	width: 160rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fui-menu__btn {
	width: 88rpx;
	height: 88rpx;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用属性控制显示隐藏

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

<fui-swipeaction-group>
	<fui-swipe-action :show="show">
		<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false">默认打开</fui-list-cell>
	</fui-swipe-action>
</fui-swipeaction-group>
1
2
3
4
5
data() {
	return {
		show: true
	}
}
1
2
3
4
5

# Slots

# fui-swipeaction-group 组件

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

# fui-swipe-action 组件

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

# Props

# fui-swipeaction-group 组件

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

# fui-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 -
//buttons 数据格式说明,以下属性为约定属性值,其他属性可自定义扩展
//温馨提示:使用插槽则buttons属性失效
[{
	//按钮文本
	text: '删除',
	//按钮字体大小,可选
	size: 32,
	//按钮字体颜色,可选
	color: '#fff',
	//按钮背景色
	background: '#FF2B2B'
}]
1
2
3
4
5
6
7
8
9
10
11
12

# Events

# fui-swipeaction-group 组件

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

# fui-swipe-action 组件

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

# Methods

# fui-swipeaction-group 组件

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

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

# fui-swipe-action 组件

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

示例预览

# 示例代码地址

FirstUISwipeAction 滑动菜单
Last Updated: 9/29/2022, 1:07:59 AM