집 > 기사 > 웹 프론트엔드 > vue 모바일 UI 프레임워크를 사용하여 QQ 사이드 메뉴를 구현하는 방법(상세 튜토리얼)

vue 모바일 UI 프레임워크를 사용하여 QQ 사이드 메뉴를 구현하는 방법(상세 튜토리얼)

亚连원래의: 2018-05-31 16:05:422407검색

이 글에서는 QQ와 유사한 사이드 메뉴 구성 요소를 구현하기 위한 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>

이 시점에서 우리는 두 개의 절대 위치 컨테이너를 얻었습니다.

javascript

이제 정식 코드 작성을 시작할 수 있습니다. 상호 작용 논리를 명확히 합니다.

손가락이 왼쪽과 오른쪽으로 슬라이드되면 메인 컨테이너와 메뉴 컨테이너가 모두 손가락 움직임에 따라 움직입니다.
손가락이 움직이는 거리가 메뉴 컨테이너의 너비를 초과하면 페이지를 계속 오른쪽으로 이동할 수 없습니다
손가락을 왼쪽으로 이동하면 메뉴와 페이지 이동 거리가 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: &#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) {}
 }
}

다음으로 핵심 터치 이벤트 처리 기능은 다음과 같습니다.

손가락을 누르는 순간 현재 손가락이 터치한 지점과 현재 메인 컨테이너의 위치가 기록됩니다. 손가락이 움직이면 움직이는 지점의 위치를 얻습니다.
X, Y축 거리를 계산합니다. 이동 거리가 이동했다면 두 컨테이너의 위치를 변경합니다(페이지에서 다른 이벤트가 발생하지 않도록 방지). 이동 중에 발동됨)
손가락이 화면에서 나가기: 누적 이동 거리가 임계 값을 초과하면 애니메이션을 사용하여 메뉴를 열고, 그렇지 않으면 메뉴를 닫습니다.

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 ? &#39;r-slide-menu-transition&#39; : &#39;&#39;
}

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

<template>
 <p class="r-slide-menu">
 <p class="r-slide-menu-wrap" :class="transitionClass" :style="wrapStyle">
  <slot name="menu"></slot>
 </p>
 <p class="r-slide-menu-content" :class="transitionClass" :style="contentStyle"
  @touchstart="touchstart"
  @touchmove="touchmove"
  @touchend="touchend">
  <slot></slot>
 </p>
 </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) {
  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
 },
 // 点击切换
 switch () {
  this.setTransition(true)
  this.move.x = (this.move.x === 0) ? this.width : 0
 },
 setTransition (isTransition = false) {
  this.transitionClass = isTransition ? &#39;r-slide-menu-transition&#39; : &#39;&#39;
 }
 }
}
</script>
<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>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

vue 모바일 UI 프레임워크를 사용하여 QQ 사이드 메뉴를 구현하는 방법(상세 튜토리얼)

관련 기사