# SwipeAction 滑动菜单
概述
SwipeAction 滑动菜单，用于滑动操作的组件。
SwipeAction 提供了 fui-swipeaction-group 和 fui-swipe-action 两个组件来组合使用。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入册
{
"navigationBarTitleText": "滑动菜单",
"usingComponents": {
"fui-swipeaction-group": "/components/firstui/fui-swipeaction-group/fui-swipeaction-group",
"fui-swipe-action": "/components/firstui/fui-swipe-action/fui-swipe-action"
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-swipeaction-group": "components/firstui/fui-swipeaction-group/fui-swipeaction-group",
"fui-swipe-action": "components/firstui/fui-swipe-action/fui-swipe-action"
}
1
2
3
4
2
3
4
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 buttons 属性设置菜单按钮，不传则使用默认值，bindclick 事件为菜单按钮点击事件，bindchange 事件为切换显示隐藏菜单时触发。
<fui-swipeaction-group>
<fui-swipe-action bindclick="onClick" bindchange="change">
<fui-list-cell padding="36rpx 32rpx" highlight="{{false}}">默认菜单按钮</fui-list-cell>
</fui-swipe-action>
<fui-swipe-action buttons="{{buttons}}" bindclick="onClick" bindchange="change">
<fui-list-cell padding="36rpx 32rpx" highlight="{{false}}">自定义菜单按钮</fui-list-cell>
</fui-swipe-action>
<fui-swipe-action buttons="{{buttons}}" custom>
<fui-list-cell padding="36rpx 32rpx" highlight="{{false}}">插槽菜单</fui-list-cell>
<view class="fui-menu__box" slot="buttons">
<view class="fui-menu__btn">
<fui-icon name="delete" size="{{44}}"></fui-icon>
</view>
</view>
</fui-swipe-action>
</fui-swipeaction-group>
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
Page({
data: {
buttons: [{
text: '标为未读',
background: '#465CFF'
}, {
text: '删除',
background: '#FF2B2B'
}]
},
onClick(e) {
console.log(e.detail)
wx.fui.toast(e.detail.item.text)
},
change(e) {
console.log(e.detail)
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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: {
show: true
}
1
2
3
2
3
点击不立即关闭菜单，结合提示操作
通过 clickClose 属性控制点击时是否关闭菜单，show 属性手动设置菜单打开或关闭。
<fui-swipeaction-group>
<fui-swipe-action clickClose="{{false}}" show="{{isShow}}" bindchange="stateChange" bindclick="buttonTap">
<fui-list-cell padding="36rpx 32rpx" highlight="{{false}}" bindclick="onTap">点击菜单弹出提示信息</fui-list-cell>
</fui-swipe-action>
</fui-swipeaction-group>
1
2
3
4
5
2
3
4
5
Page({
data: {
isShow:false
},
//点击不关闭，结合提示操作
stateChange(e) {
//同步打开状态【结合提示时必须同步】
this.setData({
isShow: e.detail.isOpen
})
},
onTap() {
//列表点击事件
wx.fui.toast('点击了～')
//关闭菜单，自行控制是否关闭
// this.setData({
// isShow: false
// })
},
buttonTap(e) {
//按钮点击事件
console.log(e)
wx.fui.modal('提示', '确定要删除吗', (confirm) => {
if (confirm) {
wx.fui.toast('删除～')
} else {
wx.fui.toast('取消删除，关闭菜单～')
//关闭菜单
this.setData({
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
34
35
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
34
35
# 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 | - |
| custom | Boolean | 是否使用插槽自定义按钮 | false | - |
| 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 组件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| bind:click | 点击菜单按钮时触发 | event.detail = { index:按钮索引, item: ...this.buttons[index], param:自定义参数 } |
| bind:change | 滑动菜单打开关闭时触发 | event.detail = { isOpen:是否打开, param:自定义参数 } |
# Methods
# fui-swipeaction-group 组件
通过 this.selectComponent 获取子组件的实例对象（调用时需要传入一个匹配选择器 selector），然后调用上面的实例方法。
| 方法名 | 说明 | 传入参数 | 返回参数 |
|---|---|---|---|
| reset | 重置组件样式，改变滑动菜单按钮数据时使用 | - | - |
| close | 关闭全部已经打开的滑动菜单 | - | - |
# fui-swipe-action 组件
| 方法名 | 说明 | 传入参数 | 返回参数 |
|---|---|---|---|
| - | - | - | - |