# 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

# 属性

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

  • iOS
  • Android
  • Web
  • MP
v1.0.0