js 向左拖动/滑动删除

向来不废话,直接上内容:)

<template>
<div id="slide-container">

    <div class="wrapper">

        <div :style="leftStyle" ref="left" class="left"  @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
            自定义内容
        </div>
        <div :style="rightStyle" ref="deleteBtn" class="delete">删除</div>

    </div>
</div>
</template>
<script>
export default {
data(){
    return{
        startX:null,
        startM:null,
        startE:null,
        left:null,
        deleteBtn:null,
        leftStyle:{},
        rightStyle:{},
    }
},
mounted(){
    this.deleteBtn = this.$refs.deleteBtn.offsetWidth;
},
methods:{
    touchStart (e) {
        this.startX = e.touches[0].clientX
    },
    touchMove(e){
        this.startM = e.touches[0].clientX;
        this.left = this.startM - this.startX;

        if( (-this.left) > this.deleteBtn){  //左滑     注意: 这里的100,是与删除div的width保持一致;
            this.left = -this.deleteBtn;    //转成负数
        }

        if( this.left > 0 ){     //右滑
             this.left = 0;
        }

        this.leftStyle = { left: this.left+'px' };

        var temp = (-this.deleteBtn- this.left);
        this.rightStyle = { right: temp+'px' };
    },
    touchEnd(e){

        if( -this.left < this.deleteBtn){      //鼠标松开时, 如果长度小于.delete的width;
            this.left = 0;          
            this.leftStyle = { left: this.left+'px' };
            var temp = (-this.deleteBtn- this.left);
            this.rightStyle = { right: temp+'px' };  
        }
    },

  }
}
</script>
<style scoped lang="scss">
#slide-container{
.wrapper{
    width: 100%;
    line-height: 3rem;
    height: 3rem;
    font-size: 14px;
    border: 1px solid #ccc;
    overflow: hidden;
    display: flex;
    position: relative;

    .left{
        width: 100%;
        height: 100%;
        background: #fff;
        color: black;
        position: absolute;
        left: 0;
        z-index: 3;
        transition: all 0.1s;
    }

    .delete{
        position: absolute;
        right: -100px;
        width: 100px;
        height: 100%;
        background: #ff4949;
        color: #fff;
        text-align: center;
        transition: all 0.1s;
    }
 }
}
</style>

参考: https://www.jianshu.com/p/100849bfeb0e