Heim >Web-Frontend >js-Tutorial >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
<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) {}
}
}
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' : ''
}
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 BlaupausenDetaillierte 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!