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>
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>
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>Zu diesem Zeitpunkt haben wir zwei absolut positionierte Container
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) {}
}
}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' : ''
}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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
