Vue.js移動端左滑刪除組件

Vue.js移動端左滑刪除組件

左滑刪除在移動端很常見。下面咱們一塊兒來封裝一下這個簡單的小組件。咱們想要是：

• 當滑塊沒有超過刪除按鈕的一半時自動回到起點位置。
• 滑動距離超過一半滑動到最大值（刪除按鈕寬度）
• 儘可能精簡代碼

---

在開始以前，咱們先得將 [touchEventApi][1]弄清楚了。這個小組件中，用到了：

1.  TouchEvent.touches （表示一 個 TouchList 對象，包含了全部當前接觸觸摸平面的觸點的Touch對象）

2.  TouchEvent.changedTouches （一個 TouchList 對象，包含了表明全部從上一次觸摸事件到這次事件過程當中，
    狀態發生了改變的觸點的 Touch 對象。）

---

話很少說，直接上代碼:

<template>
     <div class="delete">
             <div class="slider">
                   <div class="content" 
                      @touchstart='touchStart'
                      @touchmove='touchMove'
                      @touchend='touchEnd'
                      :style="deleteSlider"
                   >
                <!-- 插槽中放具體項目中須要內容         -->   
                    <slot></slot>
                   </div>
                   <div class="remove" ref='remove'>
                       刪除
                   </div>
            </div>
        
     </div>
</template>

而後是css，這裏我使用的是less

<style scoped lang="less" scoped>
    .slider{
        width: 100%;
        height:200px;
        position: relative;
         user-select: none;
        .content{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background:green;
            z-index: 100;
            //    設置過渡動畫
            transition: 0.3s;
             
        }
        .remove{
            position: absolute;
            width:200px;
            height:200px;
            background:red;
            right: 0;
            top: 0;
            color:#fff;
            text-align: center;
            font-size: 40px;
            line-height: 200px;
        }
    }
 
</style>

<script type="text/ecmascript-6">
  export default {
     data() {
     return {
        startX:0,   //觸摸位置
        endX:0,     //結束位置
        moveX: 0,   //滑動時的位置
        disX: 0,    //移動距離
        deleteSlider: '',//滑動時的效果,使用v-bind:style="deleteSlider"
     }
    
     },
     methods:{
         touchStart(ev){
                ev= ev || event
          //tounches類數組，等於1時表示此時有隻有一隻手指在觸摸屏幕
    
            if(ev.touches.length == 1){
                    // 記錄開始位置
                    this.startX = ev.touches[0].clientX;
                }
            },
         touchMove(ev){
                ev = ev || event;
                   //獲取刪除按鈕的寬度，此寬度爲滑塊左滑的最大距離
                let wd=this.$refs.remove.offsetWidth;
                    if(ev.touches.length == 1) {
                        // 滑動時距離瀏覽器左側實時距離
                        this.moveX = ev.touches[0].clientX
                
                        //起始位置減去 實時的滑動的距離，獲得手指實時偏移距離
                        this.disX = this.startX - this.moveX;
                   console.log(this.disX)
                        // 若是是向右滑動或者不滑動，不改變滑塊的位置
                        if(this.disX < 0 || this.disX == 0) {
                            this.deleteSlider = "transform:translateX(0px)";
                        // 大於0，表示左滑了，此時滑塊開始滑動 
                        }else if (this.disX > 0) {
                             //具體滑動距離我取的是 手指偏移距離*5。
                            this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)";
                            
                            // 最大也只能等於刪除按鈕寬度 
                            if (this.disX*5 >=wd) {
                                this.deleteSlider = "transform:translateX(-" +wd+ "px)";
                             
                            }
                        }
                    }
              },
         touchEnd(ev){
              ev = ev || event;
              let wd=this.$refs.remove.offsetWidth;
              if (ev.changedTouches.length == 1) {
                    let endX = ev.changedTouches[0].clientX;
                      
                        this.disX = this.startX - endX;
                        console.log(this.disX)
                        //若是距離小於刪除按鈕一半,強行回到起點
                        
                        if ((this.disX*5) < (wd/2)) {
                          
                            this.deleteSlider = "transform:translateX(0px)";
                        }else{
                            //大於一半 滑動到最大值
                             this.deleteSlider = "transform:translateX(-"+wd+ "px)";
                        }
                    }
                }      
     }
     }
</script>

到這裏就所有完成了，但願對你們有幫助！不足的但願你們可以指出來！