Vue.js 이동 단 왼쪽 미끄럼 제거 구성 요소 구현 코드

왼쪽 미끄럼 삭 제 는 이동 단 에서 흔히 볼 수 있 습 니 다.다음은 우리 함께 이 간단 한 작은 구성 요 소 를 포장 합 시다.우리 가 원 하 는 것 은:
4.567917.슬라이더 가 삭제 단추 의 절반 을 초과 하지 않 았 을 때 자동 으로 시작 위치 로 돌아 갑 니 다

미끄럼 거리 가 절반 을 넘 으 면 최대 치(삭제 버튼 너비)로 미 끄 러 집 니 다

코드 를 최대한 간소화 하 다.
효 과 는 다음 과 같 습 니 다:

시작 하기 전에[touch EventApi][1]을 먼저 알 아야 합 니 다.이 작은 구성 요소 에 사 용 됩 니 다:
1.  Touch Event.touches(Touch List 대상 을 표시 하 며 현재 터치 평면 에 접촉 하고 있 는 모든 터치 대상 을 포함 합 니 다)
2.  TouchEvent.changed Touches(하나의 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>

여기까지 만 하면 다 완 성 됩 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!많은 응원 부 탁 드 리 겠 습 니 다.