# 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
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
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
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
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
2
3
4
5
data() {
return {
show: true
}
}
1
2
3
4
5
2
3
4
5
点击不立即关闭菜单，结合提示操作
通过 clickClose 属性控制点击时是否关闭菜单，show 属性手动设置菜单打开或关闭。
<fui-swipeaction-group>
<fui-swipe-action :clickClose="false" :show="isShow" @change="stateChange" @click="buttonTap">
<fui-list-cell :padding="['36rpx','32rpx']" :highlight="false"
@click="onTap">点击菜单弹出提示信息</fui-list-cell>
</fui-swipe-action>
</fui-swipeaction-group>
1
2
3
4
5
6
2
3
4
5
6
export default {
data() {
return {
isShow: false
}
},
methods: {
//点击不关闭，结合提示操作
stateChange(e) {
//同步打开状态【结合提示时必须同步】
this.isShow = e.isOpen
},
onTap() {
//列表点击事件，此处也可关闭菜单
console.log('详情～')
this.fui.toast('点击了～')
},
buttonTap(e) {
//按钮点击事件
console.log(e)
this.fui.modal('提示', '确定要删除吗', (confirm) => {
if (confirm) {
this.fui.toast('删除～')
} else {
this.fui.toast('取消删除，关闭菜单～')
//关闭菜单
this.isShow = false
}
}, true)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 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 | - |
| clickClose V2.1.0+ | Boolean | 点击菜单是否立即关闭菜单，设为false时可结合@change事件同步状态以及show属性手动关闭菜单 | true | - |
| marginTop V1.9.9+ | Number, String | 同css margin-top值，单位rpx | 0 | - |
| marginBottom V1.9.9+ | Number, String | 同css margin-bottom值，单位rpx | 0 | - |
| 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
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 组件
| 方法名 | 说明 | 传入参数 | 返回参数 |
|---|---|---|---|
| - | - | - | - |
SwipeAction 滑动菜单