The UI framework of vue mobile terminal realizes the side menu plug-in effect

This time I will bring you the UI framework of vue mobile terminal to implement the side menu plug-in effect. What are the precautions of the UI framework of vue mobile terminal to implement the side menu plug-in. The following is a practical case. , let’s take a look.

In recent interviews, I found that many front-end programmers have never had experience in writing plug-ins, and they basically work on Baidu. 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.

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>

In order 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 used 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 let’s start the formal code writing. First, let’s clarify the interaction logic:

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

• When the finger movement distance 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 to be able to enter parameters when using the component to customize the menu width and the ratio of the critical value that triggers the menu to close and the menu width. At the same time, we need to add touch events to the main container. Finally, we add separate additions to the menu container and the main container. A style that controls their movement. Control the movement of the container by controlling this style

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

Next, let’s implement our core touch event processing function. The logic of the event is as follows:

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

3. When the finger moves, the position of the moving point is obtained

5. 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 horizontal movement, otherwise it is a vertical movement

7. If it moves horizontally, it is judged that the current movement distance is within a reasonable movement range (0 to menu width). If so, the positions of the two containers are changed (preventing other events in the page from being triggered during the movement)

9. 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 ? 'r-slide-menu-transition' : ''
}

Above, there is a setTransition in this core code Function, the function of this function is to add a 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 the finger is pressed down, to avoid There is a bad experience of delayed container and finger sliding during sliding. 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:

<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) {
  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 ? 'r-slide-menu-transition' : ''
 }
 }
}
</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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to reload the routing page in AngularJS

Why is element-ui binding @keyup event invalid?

The above is the detailed content of The UI framework of vue mobile terminal realizes the side menu plug-in effect. For more information, please follow other related articles on the PHP Chinese website!