집 >웹 프론트엔드 >JS 튜토리얼 >Vue 모바일 단말기의 UI 프레임워크는 사이드 메뉴 플러그인 효과를 구현합니다.

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

php中世界最好的语言원래의: 2018-04-11 15:36:523410검색

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

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

만들기 시작

DOM 구조

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

<template>
 <p class="r-slide-menu">
 <p class="r-slide-menu-wrap"></p>
 <p class="r-slide-menu-content"></p>
 </p>
</template>

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

<template>
 <p class="r-slide-menu">
 <p class="r-slide-menu-wrap">
  <slot name="menu"></slot>
 </p>
 <p class="r-slide-menu-content">
  <slot></slot>
 </p>
 </p>
</template>

css 스타일

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

<style lang="scss">
@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으로 돌아가도록 손가락을 왼쪽으로 이동하면 페이지가 계속 왼쪽으로 이동할 수 없습니다
화면에서 손가락을 떼면 페이지 슬라이드가 일정 거리(전체 메뉴 너비에 대한 비율)를 초과하면 전체 메뉴가 열리고, 페이지 슬라이드가 일정 거리 미만이면 메뉴가 닫힙니다.

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

이벤트 처리

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

<template>
 <p class="r-slide-menu">
 <p class="r-slide-menu-wrap" :style="wrapStyle">
  <slot name="menu"></slot>
 </p>
 <p class="r-slide-menu-content" :style="contentStyle"
 @touchstart="touchstart"
 @touchmove="touchmove"
 @touchend="touchend">
  <slot></slot>
 </p>
 </p>
</template>
<script>
export default {
 props: {
 width: {
  type: String,
  default: '250'
 },
 ratio: {
  type: Number,
  default: 2
 }
 },
 data () {
 return {
  isMoving: false,
  transitionClass: '',
  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) {}
 }
}

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) < Math.abs(moveY)) return false
 e.preventDefault()
 this.isMoving = true
 moveX = this.startPoint.x * 1 + moveX * 1
 moveY = this.startPoint.y * 1 + moveY * 1
 if (moveX >= this.width) {
 this.move.x = this.width
 } else if (moveX <= 0) {
 this.move.x = 0
 } else {
 this.move.x = moveX
 }
},
touchend (e) {
 this.setTransition(true)
 this.isMoving = false
 this.move.x = (this.move.x > this.width / this.ratio) ? this.width : 0
},
setTransition (isTransition = false) {
 this.transitionClass = isTransition ? 'r-slide-menu-transition' : ''
}

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