Le cadre d'interface utilisateur du terminal mobile vue réalise l'effet de plug-in du menu latéral

Cette fois, je vais vous présenter le cadre d'interface utilisateur du terminal mobile vue pour implémenter l'effet de plug-in du menu latéral. Quelles sont les précautions concernant le cadre d'interface utilisateur du terminal mobile vue pour implémenter le. plug-in du menu latéral. Ce qui suit est un cas pratique, jetons un coup d'œil.

Dans des interviews récentes, j'ai découvert que de nombreux programmeurs front-end n'ont jamais eu d'expérience dans l'écriture de plug-ins et qu'ils travaillent essentiellement sur Baidu. J'ai donc l'intention d'écrire une série d'articles pour apprendre à des frères qui n'ont jamais écrit de composants comment écrire des plug-ins étape par étape. Cette série d'articles est tous basée sur VUE et le contenu principal est le même. Après l'avoir compris, vous pouvez rapidement le réécrire en composants tels que React, Angular ou Small Programs. Cet article est le premier et concerne un composant de menu latéral similaire à QQ.

Démarrer la production

Structure DOM

Il devrait y avoir deux conteneurs dans la structure globale : 1. Conteneur de menu 2. Conteneur de page principale ; donc la structure actuelle du DOM est la suivante :

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

Afin de rendre personnalisable le contenu du menu et le contenu du thème, nous ajoutons deux emplacements aux deux conteneurs : le contenu principal est placé dans l'emplacement par défaut, et le menu est placé dans l'emplacement du menu :

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

style CSS

J'ai utilisé scss dans mon projet, le code est le suivant :

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

À ce stade, nous avons deux absolument positionnés conteneurs

javascript

Commençons maintenant l’écriture formelle du code. Tout d’abord, nous clarifions la logique d’interaction :

• Lorsque le doigt glisse vers la gauche et la droite, le conteneur principal et le conteneur de menu se déplacent avec le mouvement du doigt

• Lorsque la distance de mouvement du doigt dépasse la largeur du conteneur de menu, la page ne peut pas continuer à glisser vers la droite

• Lorsque le doigt se déplace vers la gauche pour que la distance de déplacement entre le menu et la page revienne à zéro, la page ne peut pas continuer à se déplacer vers la gauche

• Lorsque le doigt est relâché de l'écran, si la page glisse au-delà d'une certaine distance (proportion de toute la largeur du menu), tout le menu sera ouvert. Si elle est inférieure à une certaine distance, le menu sera fermé

  .

Nous devons donc maintenant pouvoir saisir des paramètres lors de l'utilisation du composant pour personnaliser la largeur du menu et le rapport entre la valeur critique qui déclenche la fermeture du menu et la largeur du menu. En même temps, nous devons ajouter des événements tactiles au menu. conteneur principal. Enfin, nous ajoutons des ajouts séparés au conteneur de menu et au conteneur principal Un style qui contrôle leur mouvement Contrôlez le mouvement du conteneur en contrôlant ce 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) {}
 }
}

. Ensuite, implémentons notre fonction principale de traitement des événements touch La logique de l'événement est la suivante :

1. . Au moment où le doigt est enfoncé, le point actuellement touché par le doigt et la position du conteneur principal actuel sont enregistrés

3. Lorsque le doigt bouge, la position du point mobile est obtenue

5. Calculez les distances des axes X et Y du mouvement actuel du point du doigt. Si la distance de mouvement X est supérieure à la distance de mouvement Y, elle est déterminée comme un mouvement latéral, sinon il s'agit d'un mouvement vertical 🎜>

. S'il se déplace horizontalement, on estime que la distance de déplacement actuelle se situe dans une plage de déplacement raisonnable (0 à la largeur du menu). Si tel est le cas, les positions des deux conteneurs sont modifiées (empêchant que d'autres événements sur la page ne soient déclenchés pendant le mouvement). )
Le doigt quitte l'écran : Si la distance de déplacement cumulée dépasse la valeur critique, utilisez l'animation pour ouvrir le menu, sinon fermez le menu
9. Ci-dessus, il y a un setTransition dans ce code principal Fonction, la fonction de cette fonction est d'ajouter un attribut de transition à l'élément conteneur lorsque le doigt part, de sorte que le conteneur ait une animation de transition pour terminer l'animation de fermeture ou d'ouverture, par conséquent, l'attribut de transition sur le conteneur doit être supprimé ; au moment où le doigt est enfoncé, pour éviter une mauvaise expérience de glissement retardé du récipient et du doigt pendant le processus de glissement. Pour dernier rappel, la raison pour laquelle Translate3d est utilisé à la place de Translate dans le code est d'activer l'accélération 3D de l'animation sur les téléphones mobiles et d'améliorer la fluidité de l'animation. Le code final est le suivant :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

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' : ''
}

Lecture recommandée :

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

Comment recharger la page de routage dans AngularJS

Pourquoi l'événement @keyup de liaison element-ui n'est-il pas valide ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!