Dieses Mal werde ich Ihnen das UI-Framework des Vue-Mobilterminals zur Implementierung des Seitenmenü-Plug-In-Effekts vorstellen. Was sind die Vorsichtsmaßnahmen über das UI-Framework des Vue-Mobilterminals zur Implementierung? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
In jüngsten Interviews habe ich herausgefunden, dass viele Front-End-Programmierer noch nie Erfahrung mit dem Schreiben von Plug-Ins hatten und grundsätzlich mit Baidu arbeiten. 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.
Produktion starten
DOM-Struktur
In der Gesamtstruktur sollten zwei Container vorhanden sein: 1. Menücontainer 2. Hauptseitencontainer; daher lautet 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 den Menüinhalt und den Themeninhalt anpassbar zu machen, 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
Ich habe in meinem Projekt scss 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
Zu diesem Zeitpunkt haben wir zwei absolut positionierte Container
Javascript
Beginnen wir nun mit dem Schreiben des formalen Codes. Zuerst klären wir die Interaktionslogik:
Wenn der Finger nach links und rechts gleitet, bewegen sich sowohl der Hauptcontainer als auch der Menücontainer mit der Fingerbewegung
Wenn die Fingerbewegungsentfernung die Breite des Menücontainers überschreitet, kann die Seite nicht weiter nach rechts verschoben werden
Wenn sich der Finger nach links bewegt, sodass der Bewegungsabstand zwischen dem Menü und der Seite auf Null zurückkehrt, kann die Seite nicht weiter nach links verschoben werden
-
Wenn der Finger vom Bildschirm losgelassen wird und die Seite über einen bestimmten Abstand (Proportion der gesamten Menübreite) hinausgleitet, wird das gesamte Menü geöffnet. Wenn dieser Abstand kleiner als ein bestimmter Abstand ist, wird das Menü geschlossen
Jetzt müssen wir in der Lage sein, Parameter einzugeben, wenn wir die Komponente verwenden, um die Menübreite und das Verhältnis zwischen dem kritischen Wert, der das Schließen des Menüs auslöst, und der Menübreite anzupassen. Gleichzeitig müssen wir Berührungsereignisse hinzufügen Hauptcontainer. Schließlich fügen wir dem Menücontainer und dem Hauptcontainer einen Stil hinzu, der die Bewegung des Containers steuert, indem wir diesen Stil steuern
Als nächstes implementieren wir unsere Kernfunktion für die Touch
Ereignisverarbeitung
<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) {}
}
}Nach dem Login kopieren
. Die Logik des Ereignisses lautet 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, wird die Position des Bewegungspunkts ermittelt
-
Berechnen Sie die X- und Y-Achsenabstände der aktuellen Fingerpunktbewegung. Wenn die X-Bewegungsentfernung größer als die Y-Bewegungsentfernung ist, wird sie als seitliche Bewegung bestimmt, andernfalls handelt es sich um eine vertikale Bewegung
Wenn es sich horizontal bewegt, wird davon ausgegangen, dass die aktuelle Bewegungsentfernung innerhalb eines angemessenen Bewegungsbereichs liegt (0 bis Menübreite). Wenn ja, werden die Positionen der beiden Container geändert (wodurch verhindert wird, dass während der Bewegung andere Ereignisse auf der Seite ausgelöst werden). )
-
-
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ü
-
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
- Empfohlene Lektüre:
So laden Sie die Routing-Seite in AngularJS neu
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' : ''
}Nach dem Login kopieren
Warum ist das Element-UI-Bindungs-@keyup-Ereignis ungültig?
Das obige ist der detaillierte Inhalt vonDas UI-Framework des Vue-Mobilterminals realisiert den Plug-In-Effekt für das Seitenmenü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
