# SwipeCell 滑动单元格
# 引入说明
TIP
import SwiperCell from "jimoui/components/SwipeCell/SwipeCell";
1
:::
# 代码演示
TIP
注意:由于PC端的交互限制,本组件请在移动端使用Demo页面体验:
https://testjimo.dmall.com/guide.html#jimoui_guide/view/SwipeCell/SwipeCell
<template v-for="item in swiperCellList1">
<SwiperCell
:key="item.key"
:sliderIndex="item.sliderIndex"
:curSlideIndex="item.curSlideIndex"
:btnList="item.btn"
@onClick="swiperCellClickHandler"
@onStartStatus="startHandler"
@onEndStatus="endHandler"
v-model="refreshFlag"
>
<div style="background: #eee;width:100%;height:200px">内容</div>
</SwiperCell>
</template>
<script>
export default kayakVue({
data() {
return {
title: "SwipeCell 滑动单元格",
swiperCellList1: [
{
key: 1,
btn: [
{
type: "text",
title: "删除",
bgColor: "#f44000",
width: "1.97rem",
},
],
curSlideIndex: 1,
sliderIndex: 1,
},
],
swiperCellList2: [
{
key: 1,
btn: [
{
type: "text",
title: "加入收藏夹",
bgColor: "#FF680A",
width: "1.97rem",
},
{
type: "text",
title: "删除",
bgColor: "#f44000",
width: "1.97rem",
},
],
curSlideIndex: 1,
sliderIndex: 1,
},
{
key: 2,
btn: [
{
type: "image",
title: "删除",
imgUrl: "https://img.dmallcdn.com/dshop/202112/00d7c379-be1e-4e4e-ba9d-1546104ebed9",
bgColor: "#f43000",
width: "1.97rem",
},
],
curSlideIndex: 2,
sliderIndex: 2,
},
],
refreshFlag: false,
};
},
methods: {
swiperCellHandler(item) {
this.swiperCellOutHandler();
},
swiperCellOutHandler() {
this.refreshFlag = true;
console.log("refreshFlag", this.refreshFlag);
},
startHandler() {
//this.refreshFlag = true;
},
endHandler() {
this.refreshFlag = true;
},
},
});
</script>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
# 属性
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
:sliderIndex | 当前组件的index | Number | |
:curSlideIndex | 父组件当前移动的组件index | Number/String | 监听父组件的curSlideIndex值,和自己的sliderId比较,用以隐藏左滑的组件 |
:sensitivity | 灵敏度 | Number | 灵敏度(1 ~ 10)1 => 最细腻(跟手) 10 => 最灵敏 |
:btnList | 按钮 | Array | 默认删除按钮 可配置多个按钮 |
v-model="refreshFlag" | 收回变量 | Boolean | 控制按钮显示隐藏状态 |
@onClick | 按钮点击回调 | $Event | 点击按钮触发方法暴露给外层 |
@onStartStatus | 滑动收回回调 | $Event | 滑动收回(隐藏按钮)触发方法暴露给外层 |
@onEndStatus | 滑动到最大值 | $Event | 滑动到完成状态(展示按钮)触发方法暴露给外层 |
@onWrapperClick | slot内容击回调 | $Event | 内容点击回调触发方法暴露给外层 |
:::
# 注释
1.点击空白区域收起滑动 把外层"refreshFlag"变量改为true。 2.组件之间互斥,滑开一个收起领一个 外层在endHandler暴露的事件里把 "refreshFlag"变量改为true。