# SwipeAction 滑动菜单 V1.1.0+
概述
SwipeAction 滑动菜单，用于滑动操作的组件。
SwipeAction 提供了 fui-swipeaction-group 和 fui-swipe-action 两个组件来组合使用。
温馨提示
- 使用该组件 需要 同时引入
fui-types类型文件。 - 该组件内置了国际化配置，使用该组件，必须同时引入
fui-lang所有文件。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiSwipeactionGroup from "@/components/firstui/fui-swipeaction-group/fui-swipeaction-group.uvue"
import fuiSwipeAction from "@/components/firstui/fui-swipe-action/fui-swipe-action.uvue"
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。
基础使用
通过 buttons 属性设置菜单按钮，不传则使用默认值，@onclick 事件为菜单按钮点击事件，@change 事件为切换显示隐藏菜单时触发。
<fui-swipeaction-group>
<fui-swipe-action @onclick="onTap" @change="change">
<fui-list-cell padding="36rpx 32rpx" :highlight="false">
<text class="fui-text">默认菜单按钮</text>
</fui-list-cell>
</fui-swipe-action>
<fui-swipe-action :buttons="buttons" @onclick="onTap" @change="change">
<fui-list-cell padding="36rpx 32rpx" :highlight="false">
<text class="fui-text">自定义菜单按钮</text>
</fui-list-cell>
</fui-swipe-action>
<fui-swipe-action :buttons="buttons">
<fui-list-cell padding="36rpx 32rpx" :highlight="false">
<text class="fui-text">插槽菜单</text>
</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
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { FuiSwipeActionButtonParam } from '@/components/firstui/fui-types/index.uts'
export default {
data() {
return {
buttons: [{
text: '标为未读',
background: '#465CFF'
}, {
text: '删除',
background: '#FF2B2B'
}] as FuiSwipeActionButtonParam[]
}
},
methods: {
onTap(e : FuiSwipeActionButtonParam) {
console.log(JSON.stringify(e))
// this.fui.toast(e.text)
},
change(e : boolean) {
console.log(e)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.fui-menu__box {
width: 160rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.fui-menu__btn {
width: 88rpx;
height: 88rpx;
background: #fff;
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用属性控制显示隐藏
通过 visible 属性控制滑动菜单显示隐藏。
<fui-swipeaction-group>
<fui-swipe-action :visible="visible">
<fui-list-cell padding="36rpx 32rpx" :highlight="false">
<text class="fui-text">默认打开状态</text>
</fui-list-cell>
</fui-swipe-action>
</fui-swipeaction-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
export default {
data() {
return {
visible: false
}
},
onLoad() {
setTimeout(() => {
this.visible = true
}, 500)
},
methods: {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
点击不立即关闭菜单，结合提示操作
通过 clickClose 属性控制点击时是否关闭菜单，visible 属性手动设置菜单打开或关闭。
<fui-swipeaction-group>
<fui-swipe-action :clickClose="false" :visible="isShow" @change="stateChange" @onclick="buttonTap">
<fui-list-cell padding="36rpx 32rpx" :highlight="false" @onclick="onclick">
<text class="fui-text">点击菜单弹出提示信息</text>
</fui-list-cell>
</fui-swipe-action>
</fui-swipeaction-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
export default {
data() {
return {
isShow: false
}
},
methods: {
//点击不关闭，结合提示操作
stateChange(isOpen : boolean) {
//同步打开状态【结合提示时必须同步】
this.isShow = isOpen
},
onclick() {
//列表点击事件，此处也可关闭菜单
console.log('详情～')
// this.fui.toast('点击了～')
},
buttonTap(e : FuiSwipeActionButtonParam) {
//按钮点击事件
console.log(e)
this.fui.modal('提示', '确定要删除吗', (confirm) => {
if (confirm) {
console.log('删除～')
// 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<FuiSwipeActionButtonParam> | 滑动菜单按钮，具体格式见下方说明 | [{text: '删除',background: '#FF2B2B'}] | - |
| size | Number | 滑动菜单按钮字体大小，单位rpx（优先使用buttons中传值） | 32 | - |
| color | String | 滑动菜单按钮字体颜色（优先使用buttons中传值） | #fff | - |
| visible | Boolean | 是否显示滑动菜单，当 autoClose 为 true 时尽量避免使用该属性 | false | - |
| threshold | Number | 滑动多少距离菜单展开，单位px | 30 | - |
| disabled | Boolean | 是否禁止滑动 | false | - |
| autoClose | Boolean | 打开当前菜单是否自动关闭其他菜单 | true | - |
| clickClose | Boolean | 点击菜单是否立即关闭菜单，设为false时可结合@change事件同步状态以及visible属性手动关闭菜单 | true | - |
| marginTop | Number | 同css margin-top值，单位rpx | 0 | - |
| marginBottom | Number | 同css margin-bottom值，单位rpx | 0 | - |
| param | Number | 自定义参数，事件中回传 | 0 | - |
# FuiSwipeActionButtonParam
/**
* SwipeAction 滑动菜单 组件 buttons属性 参数类型
* @description SwipeAction 滑动菜单 组件 buttons属性 参数类型
* @param {string} text {string} 按钮文本，必选
* @param {string} background {string} 按钮背景色，不传或为空则默认使用danger主题色，可选
* @param {number} size {number} 按钮字体大小，单位rpx，可选
* @param {string} color {string} 按钮字体颜色，可选
* @param {number} param {number} 自定义参数，可选
* @param {number} index {number} 当前点击的按钮索引，点击事件返回，无需传值
*/
export type FuiSwipeActionButtonParam = {
text : string;
background ?: string;
size ?: number;
color ?: string;
param ?: number;
index ?: number;
}
/*页面引入*/
import { FuiSwipeActionButtonParam } from '@/components/firstui/fui-types/index.uts'
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
# Events
# fui-swipeaction-group 组件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |
# fui-swipe-action 组件
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| @onclick | (event: FuiSwipeActionButtonParam) => void | 点击菜单按钮时触发 | FuiSwipeActionButtonParam |
| @change | (event: boolean) => void | 滑动菜单打开关闭时触发，返回打开状态 | boolean：打开状态 |
# FuiSwipeActionButtonParam
# Methods
# fui-swipeaction-group 组件
通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。
| 方法名 | 类型 | 说明 | 传入参数 |
|---|---|---|---|
| reset | ()=>void | 重置组件样式，改变滑动菜单按钮数据时使用 | - |
| close | ()=>void | 关闭全部已经打开的滑动菜单 | - |
# fui-swipe-action 组件
| 方法名 | 类型 | 说明 | 传入参数 |
|---|---|---|---|
| - | - | - | - |
SwipeAction 滑动菜单