实现左滑删除功能

直接先上图看看效果：

废话不多说直接上代码：

<template>
    <div>
        <div class="biggestBox">
            <div>
                <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
                <div class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
                    <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
                    <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
                        <div class="contant">
                            <div class="imgico">
                                <img class="image" :src="item.imgUrl" />
                                <div class="label">新品</div>
                            </div>
                            <div class="rightBox">
                                <div class="title">牛排A</div>
                                <div class="Sold">已售999</div>
                                <div class="money"> <span>1积分+</span><span>￥14.00</span> <span>/￥20.00</span> </div>
                                <div class="look">查看</div>
                            </div>
                        </div>
                    </div>
                    <div class="removeBtn" @click="remove" :data-index="index">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                lists: [{
                    title: "标题1",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副标题1",
                    faddish: "爆款",
                    price: "￥12.00",
                },
                {
                    title: "标题2",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副标题2",
                    faddish: "爆款",
                    price: "￥58.00",
                },
                {
                    title: "标题3",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副标题3",
                    faddish: "爆款",
                    price: "￥99.99",
                },
                {
                    title: "标题4",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副标题4",
                    faddish: "爆款",
                    price: "￥88.32",
                },
                {
                    title: "标题5",
                    imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg",
                    subheading: "副标题5",
                    faddish: "爆款",
                    price: "￥9999.99",
                },
                ],
                startX: 0, //滑动开始
                endX: 0, //滑动结束
            };
        },
        methods: {
            // 向左滑动出现删除按钮时，点击商品信息区域取消删除
            oneself() {
                if (this.checkSlide()) {
                    this.restSlide();
                } else {
                    // 点击商品信息弹出弹框
                    console.log("点击当前商品触发事件...");
                }
            },
            //滑动开始
            touchStart(e) {
                // 记录初始位置
                this.startX = e.touches[0].clientX;
            },
            //滑动结束
            touchEnd(e) {
                // 当前滑动的父级元素
                let parentElement = e.currentTarget.parentElement;
                // 记录结束位置
                this.endX = e.changedTouches[0].clientX;
                // 左滑大于30距离删除出现
                if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
                    this.restSlide();
                    parentElement.dataset.type = 1;
                }
                // 右滑
                if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
                    this.restSlide();
                    parentElement.dataset.type = 0;
                }
                this.startX = 0;
                this.endX = 0;
            },
            //判断当前是否有滑块处于滑动状态
            checkSlide() {
                let listItems = document.querySelectorAll(".li_vessel");
                for (let i = 0; i < listItems.length; i++) {
                    if (listItems[i].dataset.type == 1) {
                        return true;
                    }
                }
                return false;
            },
            //复位滑动状态
            restSlide() {
                let listItems = document.querySelectorAll(".li_vessel");
                // 复位
                for (let i = 0; i < listItems.length; i++) {
                    listItems[i].dataset.type = 0;
                }
            },
            //删除数据信息
            remove(e) {
                // 当前索引值
                let index = e.currentTarget.dataset.index;
                // 复位
                this.restSlide();
                // 删除数组lists中一个数据
                this.lists.splice(index, 1);
            },
        },
    };
</script>

<style scoped>
    .biggestBox {
        overflow: hidden;
        /*超出部分隐藏*/
    }

    .li_vessel {
        /* 全部样式 0.2秒 缓动*/
        transition: all 0.2s;
    }

    /* =0隐藏 */
    .li_vessel[data-type="0"] {
        transform: translate3d(0, 0, 0);
    }

    /* =1显示 */
    .li_vessel[data-type="1"] {
        /* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
        transform: translate3d(-64px, 0, 0);
    }

    /* 删除按钮 */
    .removeBtn {
        width: 1.28rem;
        height: 2.06rem;
        background: #FF7373;
        font-size: .3rem;
        color: #fff;
        text-align: center;
        line-height: .44rem;
        position: absolute;
        top: 0px;
        right: -1.28rem;
        line-height: 2.06rem;
        text-align: center;
        border-radius: 2px;
    }

    /* 左边的图片样式 */
    .contant {
        overflow: hidden;
        /*消除图片带来的浮动*/
        padding: .2rem .3rem;
        background: #ffffff;
    }

    .imgico {
        width: 1.6rem;
        height: 1.6rem;
        float: left;
        position: relative;
    }

    .label {
        position: absolute;
        top: -0.07rem;
        right: -0.05rem;
        width: .68rem;
        height: .28rem;
        background: linear-gradient(135deg, #FF5858 0%, #FF736B 100%);
        border-radius: 0px .16rem 0px .08rem;
        font-size: .18rem;
        color: #fff;
        text-align: center;
        line-height: .28rem;
    }

    .image {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: .16rem;
    }

    /* 右边的文字信息样式 */
    .rightBox {
        overflow: hidden;
        padding-left: 8px;
        position: relative;
    }
    .look{
        width: 1.08rem;
        height: .44rem;
        background: #FFFFFF;
        border-radius: .22rem;
        border: 1px solid #489EFF;
        color: #489EFF;
        text-align: center;
        line-height: .44rem;
        font-size: .24rem;
        position: absolute;
        bottom: .1rem;
        right: 0rem;
    }

    .title {
        color: #333333;
        font-weight: bold;
        font-size: .3rem;
    }

    .Sold {
        font-size: .2rem;
        color: #999999;
    }

    .money {
        margin-top: .3rem;
    }

    .money>span:nth-child(1) {
        font-size: .3rem;
        font-weight: bold;
        color: #333333;
    }

    .money>span:nth-child(2) {
        font-size: .38rem;
        font-weight: bold;
        color: #333333;
    }

    .money>span:nth-child(3) {
        font-size: .2rem;
        font-weight: normal;
        color: #999999;
    }
</style>