How to implement QQ side menu using vue mobile UI framework (detailed tutorial)

This article mainly introduces the vue mobile UI framework to implement QQ-like side menu components. It is very good and has reference value. Friends in need can refer to it

Recent interviews found that many front-end programmers I have never had any experience in writing plug-ins. I basically used Baidu on the Internet. So I plan to write a series of articles to teach brothers who have never written components how to write plug-ins step by step. This series of articles are all based on VUE, and the core content is the same. After understanding it, you can quickly rewrite it into components such as react, angular, or small programs. This article is the first one, and it is about a side menu component similar to QQ.

Effect display

Let everyone take a look at the effect display to know what we want to do. The picture is a bit blurry. Let’s just settle on this:

Start making

DOM structure

There should be two containers in the overall structure: 1. Menu container 2. Main page container; therefore the current DOM structure is as follows:

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

For To make the menu content and theme content customizable, we add two slots to the two containers: the main content is placed in the default slot, and the menu is placed in the menu slot:

<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 style

I use scss in my project, the code is as follows:

<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>

At this point we have two absolutely positioned containers

javascript

Now we can start the formal code writing. First, we clarify the interaction logic:

• When the finger slides left and right, both the main container and the menu container move with the finger movement

• When the distance the finger moves exceeds the width of the menu container, the page cannot Continue to slide to the right

• When the finger moves to the left so that the moving distance between the menu and the page returns to zero, the page cannot continue to move to the left

• When the finger is released from the screen, if the page slides beyond a certain distance (proportion of the entire menu width), the entire menu will be opened. If it is less than a certain distance, the menu will be closed.

So now we need When using the component, you can enter parameters to customize the menu width and the ratio of the critical value that triggers the menu to close and close. At the same time, you need to add a touch event to the main container. Finally, we add one to each of the menu container and the main container to control their movement. style, by controlling this style to control the movement of the container

<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) {}
 }
}

Next, we will implement our core touch event processing function. The event logic is as follows :

1. The moment the finger is pressed, the point touched by the current finger and the position of the current main container are recorded.

2. When the finger moves, Obtain the position of the moved point

3. Calculate the X and Y axis distance of the current finger point movement. If the X movement distance is greater than the Y movement distance, it is determined as a lateral movement, otherwise it is Vertical movement

4. If it moves horizontally, it will be judged that the current movement distance is within a reasonable movement range (0 to menu width). If so, the positions of the two containers will be changed (moving process Prevent other events on the page from being triggered)

5. Finger leaves the screen: If the cumulative movement distance exceeds the critical value, use animation to open the menu, otherwise close the menu

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;
}

Above, there is a setTransition function in this core code. The function of this function is to add the transition attribute to the container element when the finger leaves, so that the container has a transition. animation to complete the closing or opening animation; therefore, the transition attribute on the container needs to be removed at the moment when the finger is pressed to avoid the bad experience of delayed sliding of the container and the finger during the sliding process. As a final reminder, the reason why translate3d is used instead of translate in the code is to activate the 3D acceleration of animation on mobile phones and improve the smoothness of animation. The final code is as follows:

<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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of using Angular CLI to generate code from blueprints

Detailed explanation of several easily overlooked parts of the Vue document Analysis

A brief discussion on the simple method of using Baidu Map under Vue

The above is the detailed content of How to implement QQ side menu using vue mobile UI framework (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!