原生实现左滑删除swipeRemove.vue组件

1、模板HTML结构

2、css样式，这里使用less,rem适配 1rem = 100px。

.delete {
    border-bottom: #f1f1f1 1px solid;
    background-color: #ffffff;
}
.slider {
    width: 100%;
    height: .7rem;
    position: relative;
    user-select: none;
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        //    设置过渡动画
        transition: 0.3s;
        .remove {
            position: absolute;
            width: 1rem;
            height: .695rem;
            background: #FE3824;
            right: -1rem;
            top: 0;
            color: #fff;
            text-align: center;
            font-size: .12rem;
            line-height: .7rem;
        }
    }
}

3、js部分

所用到的只是主要是移动端touches事件对象，其中：
touches：当前屏幕上所有触摸点的集合，单手时我们取touches[0]即为当前触摸点的信息，在touchStart，touchMove事件中都是可以获取到该信息的，但当手指离开屏幕时，即touchEnd事件发生时，touches中的元素随之消失。此时要获取手指的位置则要使用changedTouches，代表涉及当前(引发)事件的触摸点的集合

4、效果图

屏幕快照 2019-09-11 下午5.05.45.png

屏幕快照 2019-09-11 下午5.06.00.png