# SwipeCell 滑动单元格

# 引入说明

TIP

import SwiperCell from "jimoui/components/SwipeCell/SwipeCell";

:::

# 代码演示

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

# 属性

配置	用途	取值	使用描述
: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。