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

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>

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>

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>

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
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.
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)
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ü

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

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

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!