Vue 모바일 단말기의 UI 프레임워크는 사이드 메뉴 플러그인 효과를 구현합니다.

이번에는 사이드 메뉴 플러그인 효과를 구현하기 위한 Vue 모바일 단말기의 UI 프레임워크를 가져오겠습니다. 사이드 메뉴 플러그인을 구현하기 위한 Vue 모바일 단말기의 UI 프레임워크의 주의사항은 무엇인가요? 실제 사례이므로 살펴보겠습니다.

최근 인터뷰에서 많은 프런트 엔드 프로그래머가 플러그인 작성 경험이 없으며 기본적으로 Baidu에서 작업한다는 사실을 발견했습니다. 그래서 나는 컴포넌트를 작성해 본 적이 없는 형제들에게 플러그인 작성 방법을 단계별로 가르치기 위해 일련의 기사를 작성할 계획입니다. 이 시리즈의 기사는 모두 VUE를 기반으로 하며 핵심 내용은 동일합니다. 이해한 후에는 React, Angle 또는 작은 프로그램과 같은 구성 요소로 빠르게 다시 작성할 수 있습니다. 이번 글은 첫 번째 글로, QQ와 유사한 사이드 메뉴 컴포넌트에 대한 내용입니다.

만들기 시작

DOM 구조

전체 구조에는 두 개의 컨테이너가 있어야 합니다. 1. 메뉴 컨테이너 2. 기본 페이지 컨테이너 따라서 현재 DOM 구조는 다음과 같습니다.

<template>
 <p>
 </p>
<p></p>
 <p></p>
 
</template>

메뉴 콘텐츠와 테마 콘텐츠를 사용자 정의할 수 있도록 두 개의 컨테이너에 두 개의 슬롯을 추가합니다. 기본 콘텐츠는 기본 슬롯에 배치되고 메뉴는 메뉴 슬롯에 배치됩니다.

<template>
 <p>
 </p>
<p>
  <slot></slot>
 </p>
 <p>
  <slot></slot>
 </p>
 
</template>

css 스타일

내 프로젝트에서 scss를 사용했는데 코드는 다음과 같습니다:

<style>
@mixin one-screen {
 position: absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow: hidden;
}
.r-slide-menu{
 @include one-screen;
 &-wrap, &-content{
 @include one-screen;
 }
 &-transition{
 -webkit-transition: transform .3s;
 transition: transform .3s;
 }
}
</style>

이 시점에서 우리는 두 개의 절대 위치컨테이너

를 갖게 되었습니다. 자바스크립트

이제 공식적인 코드 작성을 시작하겠습니다. 먼저 상호 작용 논리를 명확히 해 보겠습니다.

• 손가락을 좌우로 슬라이드하면 메인 컨테이너와 메뉴 컨테이너 모두 손가락 움직임에 따라 움직입니다

• 손가락 이동 거리가 메뉴 컨테이너의 너비를 초과하면 페이지가 계속해서 오른쪽으로 슬라이드될 수 없습니다.

• 메뉴와 페이지 사이의 이동 거리가 0으로 돌아가도록 손가락을 왼쪽으로 이동하면 페이지가 계속 왼쪽으로 이동할 수 없습니다

• 화면에서 손가락을 떼면 페이지 슬라이드가 일정 거리(전체 메뉴 너비에 대한 비율)를 초과하면 전체 메뉴가 열리고, 페이지 슬라이드가 일정 거리 미만이면 메뉴가 닫힙니다.

따라서 이제 구성요소를 사용하여 메뉴 너비와 메뉴 닫기를 트리거하는 임계 값의 비율 및 메뉴 너비를 사용자 정의할 때 매개변수를 입력할 수 있어야 합니다. 동시에 터치 이벤트를 메뉴 너비에 추가해야 합니다. 마지막으로 메뉴 컨테이너와 메인 컨테이너에 별도의 추가 항목을 추가합니다. 이 스타일을 제어하여 컨테이너의 움직임을 제어합니다. 다음으로 핵심 터치

이벤트 처리

기능을 구현해 보겠습니다. 이벤트 논리는 다음과 같습니다.

손가락을 누르는 순간 손가락이 닿은 지점과 현재 메인 컨테이너의 위치가 기록됩니다
손가락이 움직이면 움직이는 지점의 위치를 ​​구합니다
현재 손가락 포인트 이동의 X 및 Y 축 거리를 계산합니다. X 이동 거리가 Y 이동 거리보다 크면 수평 이동으로 결정되고, 그렇지 않으면 수직 이동으로 결정됩니다
수평으로 이동하는 경우 현재 이동 거리가 적당한 이동 범위(0 ~ 메뉴 너비) 내에 있다고 판단하면 두 컨테이너의 위치가 변경됩니다(이동 중에 페이지의 다른 이벤트가 발생하는 것을 방지합니다). )
손가락이 화면에서 벗어남: 누적 이동 거리가 임계값을 초과하면 애니메이션을 사용하여 메뉴를 열고, 그렇지 않으면 메뉴를 닫습니다

9. <template>
    <p>
    </p>
   <p>
     <slot></slot>
    </p>
    <p>
     <slot></slot>
    </p>
    
   </template>
   <script>
   export default {
    props: {
    width: {
     type: String,
     default: &#39;250&#39;
    },
    ratio: {
     type: Number,
     default: 2
    }
    },
    data () {
    return {
     isMoving: false,
     transitionClass: &#39;&#39;,
     startPoint: {
     X: 0,
     y: 0
     },
     oldPoint: {
     x: 0,
     y: 0
     },
     move: {
     x: 0,
     y: 0
     }
    }
    },
    computed: {
    wrapStyle () {
     let style = {
     width: `${this.width}px`,
     left: `-${this.width / this.ratio}px`,
     transform: `translate3d(${this.move.x / this.ratio}px, 0px, 0px)`
     }
     return style
    },
    contentStyle () {
     let style = {
     transform: `translate3d(${this.move.x}px, 0px, 0px)`
     }
     return style
    }
    },
    methods: {
    touchstart (e) {},
    touchmove (e) {},
    touchend (e) {}
    }
   }</script>

위의 핵심 코드에는 setTransition이 있습니다. 기능, 이 함수의 기능은 손가락이 떠날 때 컨테이너 요소에 전환 속성을 추가하여 컨테이너가 닫기 또는 열기 애니메이션을 완료하는 전환 애니메이션을 갖도록 하는 것입니다. 따라서 컨테이너의 전환 속성을 제거해야 합니다. 피하기 위해 손가락을 누르는 순간 슬라이딩 과정에서 용기가 지연되고 손가락이 미끄러지는 나쁜 경험이 있습니다. 마지막으로 코드에서 Translate 대신 Translate3D를 사용하는 이유는 휴대폰에서 애니메이션의 3D 가속을 활성화하고 애니메이션의 부드러움을 향상시키기 위한 것입니다. 최종 코드는 다음과 같습니다.

touchstart (e) {
 this.oldPoint.x = e.touches[0].pageX
 this.oldPoint.y = e.touches[0].pageY
 this.startPoint.x = this.move.x
 this.startPoint.y = this.move.y
 this.setTransition()
},
touchmove (e) {
 let newPoint = {
 x: e.touches[0].pageX,
 y: e.touches[0].pageY
 }
 let moveX = newPoint.x - this.oldPoint.x
 let moveY = newPoint.y - this.oldPoint.y
 if (Math.abs(moveX) = this.width) {
 this.move.x = this.width
 } else if (moveX  this.width / this.ratio) ? this.width : 0
},
setTransition (isTransition = false) {
 this.transitionClass = isTransition ? 'r-slide-menu-transition' : ''
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

AngularJS에서 라우팅 페이지를 다시 로드하는 방법

element-ui 바인딩 @keyup 이벤트가 유효하지 않은 이유는 무엇입니까?

위 내용은 Vue 모바일 단말기의 UI 프레임워크는 사이드 메뉴 플러그인 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!