Vue QQ 왼쪽 미끄럼 제거 모듈 기능

며칠 전에 Vue 프로젝트 개발 을 했 을 때 다른 사람 이 쓴 코드 가 약간 bug 였 기 때문에 IOS 의 미끄럼 클릭 에 문제 가 있다 는 반응 이 있어 서 제 가 해결 해 드 리 겠 습 니 다.저 는 예전 의 코드 가 비교적 번 거 롭 고 지루 한 것 을 보고 아예 직접 다시 한 세트 를 썼 습 니 다.참고 하 시기 바 랍 니 다.더 좋 은 방법 이 있 으 면 신속하게 교류 하 시기 바 랍 니 다~
우리 먼저 효과 도 를 봅 시다.
효과 도
 
사고의 방향 을 실현 하 다.
구체 적 인 실현 방향 은 다음 과 같다.
  • 레이아웃 에 있어 저 는 remi+flex 레이아웃 을 사 용 했 습 니 다.구체 적 인 구조 와 스타일 은 제 코드 를 참고 할 수 있 습 니 다.주의해 야 할 것 은 뒤의 삭제 단 추 는 제 가 포 지 셔 닝 을 통 해 모든 줄 의 마지막 에 놓 았 고 숨 김 을 초과 한 것 입 니 다
  • 왼쪽 미끄럼 과 오른쪽 미끄럼 은 touch start 와 touch end 사건 을 통 해 미끄럼 의 시작 과 끝 을 판단 하 는 것 이다.수평 방향 x 의 오프셋 은 일정한 한도 값 보다 크 면 왼쪽 미끄럼 이 라 고 생각 하고 일정한 한도 값 보다 작 으 면 오른쪽 미끄럼
  • 이 라 고 생각한다.
  • 왼쪽 미끄럼 과 오른쪽 미끄럼 은 각각 부모 급 li 요소 의 translate 오프셋 을 통 해 변화 합 니 다.여기 서 제 실현 방식 은 스타일 을 미리 설명 하고 현재 부모 급 li 의 type 값 을 바 꾸 어 스타일 전환
  • 을 하 는 것 입 니 다.
  • 특정한 슬라이더 를 클릭 할 때 현재 의 모든 슬라이더 가 슬라이드 상태 에 있 는 지 먼저 판단 합 니 다.있 으 면 모든 슬라이더 상 태 를 복원 해 야 합 니 다.없 으 면 클릭 하면 효력 이 발생 합 니 다.저 는 alter 만 팝 업 하고 구체 적 인 업 무 는 실제 에 따라 작성 할 수 있 습 니 다
  • 삭제 가 상대 적 으로 간단 합 니 다.슬라이더 가 그 려 진 후에 삭제 버튼 이 나타 나 면 단 추 를 누 르 면 현재 배열 색인 값 을 얻 을 수 있 습 니 다.배열 의 splice 방법 을 통 해 해당 하 는 배열 값 을 삭제 하면 됩 니 다
  • 구체 적 실현
    Html 코드
    
    <div class="container">
      <div class="page-title">    </div>
      <ul>
        <li class="list-item " v-for="(item,index) in list " data-type="0">
          <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip">
            <img class="list-img" :src="item.imgUrl" alt="">
            <div class="list-content">
              <p class="title">{{item.title}}</p>
              <p class="tips">{{item.tips}}</p>
              <p class="time">{{item.time}}</p>
            </div>
          </div>
          <div class="delete" @click="deleteItem" :data-index="index">  </div>
        </li>
      </ul>
    </div>
    메모:여기 있 는 데 이 터 는 모두 로 컬 mock 입 니 다~
    Css 스타일 코드
    
    .page-title{
      text-align: center;
      font-size: 17px;
      padding: 10px 15px;
      position: relative;
    }
    .page-title:after{
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid #ccc;
      color: #ccc;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      z-index: 2;
    }
    .list-item{
      position: relative;
      height: 1.6rem;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
    }
    .list-item[data-type="0"]{
      transform: translate3d(0,0,0);
    }
    .list-item[data-type="1"]{
      transform: translate3d(-2rem,0,0);
    }
    .list-item:after{
      content: " ";
      position: absolute;
      left: 0.2rem;
      bottom: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid #ccc;
      color: #ccc;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      z-index: 2;
    }
    .list-box{
      padding: 0.2rem;
      background: #fff;
      display: flex;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: 0;
    }
    .list-item .list-img{
      display: block;
      width: 1rem;
      height: 1rem;
    }
    .list-item .list-content{
      padding: 0.1rem 0 0.1rem 0.2rem;
      position: relative;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
    }
    .list-item .title{
      display: block;
      color: #333;
      overflow: hidden;
      font-size: 15px;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .list-item .tips{
      display: block;
      overflow: hidden;
      font-size: 12px;
      color: #999;
      line-height: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .list-item .time{
      display: block;
      font-size: 12px;
      position: absolute;
      right: 0;
      top: 0.1rem;
      color: #666;
    }
    .list-item .delete{
      width: 2rem;
      height: 1.6rem;
      background: #ff4949;
      font-size: 17px;
      color: #fff;
      text-align: center;
      line-height: 1.6rem;
      position: absolute;
      top:0;
      right: -2rem;
    }
    이것 은 핵심 스타일 코드 이 고 일부 스타일 리 셋 코드 는 App.vue 에 넣 었 습 니 다.루트 노드 html 의 글꼴 크기 를 계산 하 는 스 크 립 트 를 index.html 에 넣 었 습 니 다~
    js 코드
    
    export default{
     name: 'index',
     data () {
     return {
      list : [
      {
       title : 'Chrome   ' ,
       imgUrl : './static/images/Chrome.png' ,
       tips : '    Flash    ' ,
       time : '   8:30'
      },
      {
       title : '     ' ,
       imgUrl : './static/images/Sina.png' ,
       tips : '  《    》        ,                 ' ,
       time : '   12:00'
      },
            {
       title : '    ・     ' ,
       imgUrl : './static/images/video.png' ,
       tips : '          ' ,
       time : '   17:45'
            },
            {
       title : '    ' ,
       imgUrl : './static/images/Wechat.png' ,
       tips : '         ,      ,       ' ,
       time : '  '
            }
      ],
      startX : 0 ,
      endX : 0 ,
     }
     },
     methods : {
     //  
     skip(){
      if( this.checkSlide() ){
      this.restSlide();
          }else{
      alert('You click the slide!')
          }
     },
     //    
     touchStart(e){
       //       
      this.startX = e.touches[0].clientX;
     },
     //    
     touchEnd(e){
                //          
      let parentElement = e.currentTarget.parentElement;
      //       
      this.endX = e.changedTouches[0].clientX;
                //   
      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('.list-item');
      for( let i = 0 ; i < listItems.length ; i++){
      if( listItems[i].dataset.type == 1 ) {
       return true;
            }
      }
      return false;
        },
     //      
     restSlide(){
      let listItems = document.querySelectorAll('.list-item');
                 //   
      for( let i = 0 ; i < listItems.length ; i++){
      listItems[i].dataset.type = 0;
      }
     },
     //  
     deleteItem(e){
       //     
      let index = e.currentTarget.dataset.index;
      //   
      this.restSlide();
      //   
      this.list.splice(index,1);
     }
     }
    }
    js 코드 는 이 정도 입 니 다.모든 함수 에 주석 설명 이 있 습 니 다.다 알 아 볼 수 있 을 거 라 고 믿 으 면 설명 이 많 지 않 습 니 다.
    결어
    어 떻 습 니까?쌀 도 상상 속 의 것 처럼 어렵 지 않 습 니까?생각 을 정리 하면 됩 니 다.실현 하 는 것 도 그리 어렵 지 않 습 니 다.물론 제 가 여기 쓴 것 은 제 실현 사고 일 뿐 입 니 다.아마도 당신들 스스로 더 좋 은 실현 방식 이 있 을 것 입 니 다.왜 꺼 내 서 공유 하지 않 습 니까?
    전체 코드 는 제 가gitlub에 맡 겼 습 니 다.다운로드 와 메 시 지 를 남 겨 주세요!

    좋은 웹페이지 즐겨찾기