Heim > Web-Frontend > js-Tutorial > Hauptteil

So implementieren Sie das QQ-Seitenmenü mit dem Vue Mobile UI Framework (ausführliches Tutorial)

亚连
Freigeben: 2018-05-31 16:05:42
Original
2411 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Vue-Mobile-UI-Framework zur Implementierung der QQ-ähnlichen Seitenmenükomponente vorgestellt. Es ist sehr gut und hat Referenzwert.

Neueste Interviews haben ergeben, dass viele davon betroffen sind -End-Programmierer Ich hatte noch nie Erfahrung im Schreiben von Plug-Ins und habe grundsätzlich Baidu im Internet verwendet. Deshalb habe ich vor, eine Reihe von Artikeln zu schreiben, um Brüdern, die noch nie Komponenten geschrieben haben, Schritt für Schritt beizubringen, wie man Plug-Ins schreibt. Diese Artikelserie basiert alle auf VUE und der Kerninhalt ist derselbe. Nachdem Sie ihn verstanden haben, können Sie ihn schnell in Komponenten wie React, Angular oder kleine Programme umschreiben. Dieser Artikel ist der erste und handelt von einer Seitenmenükomponente ähnlich wie QQ.

Effektanzeige

Lassen Sie alle zuerst einen Blick auf die Effektanzeige werfen, um zu wissen, was wir tun möchten. Das Bild ist etwas verschwommen . Beginnen wir mit:

Beginnen Sie mit der Erstellung

DOM-Struktur

Es sollte zwei Container in der Gesamtstruktur geben: 1. Menücontainer 2. Hauptseitencontainer, daher ist die aktuelle DOM-Struktur wie folgt:

<template>
 <p class="r-slide-menu">
 <p class="r-slide-menu-wrap"></p>
 <p class="r-slide-menu-content"></p>
 </p>
</template>
Nach dem Login kopieren

Um die Anpassung von Menüinhalten und Themeninhalten zu ermöglichen, fügen wir den beiden Containern zwei Slots hinzu: Der Hauptinhalt wird im Standardslot platziert und das Menü wird im Menüslot platziert:

<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>
Nach dem Login kopieren

CSS-Stil

Scss wird in meinem Projekt verwendet, der Code lautet wie folgt:

<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>
Nach dem Login kopieren

An diesem Punkt haben wir zwei absolut positionierte Container

Javascript

Jetzt können wir mit dem formalen Code-Schreiben beginnen. Zuerst klären wir das Interaktionslogik:

  • Wenn der Finger nach links und rechts gleitet, bewegen sich sowohl der Hauptcontainer als auch der Menücontainer mit der Fingerbewegung

  • Wenn der Die Entfernung, um die sich der Finger bewegt, überschreitet die Breite des Menücontainers, die Seite kann nicht weiter nach rechts verschoben werden

  • Wenn sich der Finger nach links bewegt, sodass die Bewegungsentfernung zwischen dem Menü und dem Seite kehrt auf Null zurück, die Seite kann nicht weiter nach links verschoben werden

  • Wenn der Finger vom Bildschirm losgelassen wird und die Seite über eine bestimmte Distanz (Anteil der gesamten Menübreite) hinaus gleitet ), wird das gesamte Menü geöffnet, wenn es weniger als einen bestimmten Abstand beträgt, wird das Menü geschlossen.

Also müssen wir jetzt bei der Verwendung der Komponente Parameter zum Anpassen eingeben Die Menübreite und das Verhältnis zwischen dem kritischen Wert, der das Schließen des Menüs auslöst, und der Menübreite. Gleichzeitig müssen Sie dem Hauptcontainer ein Touch-Ereignis hinzufügen Steuern Sie die Bewegung des Containers, indem Sie diesen Stil steuern . Die Logik des Ereignisses ist wie folgt:

In dem Moment, in dem der Finger gedrückt wird, werden der aktuell vom Finger berührte Punkt und die Position des aktuellen Hauptbehälters aufgezeichnet

    Wenn sich der Finger bewegt, ermitteln Sie die Position des Bewegungspunkts
  1. Berechnen Sie den X- und Y-Achsenabstand der aktuellen Fingerpunktbewegung Wenn die X-Bewegung größer ist als die Entfernung der Y-Bewegung, wird sie als seitliche Bewegung bestimmt, andernfalls handelt es sich um eine vertikale Bewegung.
  2. Wenn sie sich horizontal bewegt, wird sie als aktuelle Bewegungsentfernung beurteilt Liegt innerhalb eines angemessenen Bewegungsbereichs (0 bis Menübreite), werden die Positionen der beiden Container geändert (Verschiebungsvorgang verhindert das Auslösen anderer Ereignisse auf der Seite)
  3. Finger verlässt den Bildschirm: Wenn die kumulative Bewegungsdistanz den kritischen Wert überschreitet, verwenden Sie eine Animation, um das Menü zu öffnen, andernfalls schließen Sie das Menü
  4. <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) {}
     }
    }
    Nach dem Login kopieren

  5. Oben gibt es in diesem Kerncode eine setTransition-Funktion. Die Funktion dieser Funktion besteht darin, beim Verlassen des Containers das Übergangsattribut hinzuzufügen, sodass der Container eine Übergangsanimation aufweist und die Schließ- oder Öffnungsanimation abschließt. Daher muss das Übergangsattribut auf dem Container in dem Moment entfernt werden, in dem der Finger gedrückt wird, um die schlechte Erfahrung eines verzögerten Gleitens von Container und Finger während des Gleitvorgangs zu vermeiden. Als letzte Erinnerung: Der Grund, warum im Code „translate3d“ anstelle von „translate“ verwendet wird, besteht darin, die 3D-Beschleunigung von Animationen auf Mobiltelefonen zu aktivieren und die Glätte der Animationen zu verbessern. Der endgültige Code lautet wie folgt:

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;
}
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erklärung der Verwendung von Angular CLI zum Generieren von Code aus Blaupausen

Detaillierte Erklärung mehrerer leicht übersehener Artikel Teile der Vue-Dokumentation Analyse von

Eine kurze Diskussion über die einfache Methode zur Verwendung von Baidu Maps unter Vue


Das obige ist der detaillierte Inhalt vonSo implementieren Sie das QQ-Seitenmenü mit dem Vue Mobile UI Framework (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!