Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü

Auf Mobilgeräten ist das seitlich verschiebbare Menü eine sehr häufig verwendete Komponente (normalerweise als Drawer bezeichnet). Da die Bildschirme von Mobiltelefonen heutzutage viel zu groß sind, ist das Klicken auf die Menüschaltfläche in der Ecke offensichtlich nicht so bequem wie das Wischen in der Mitte des Bildschirms.

Im Vergleich zu anderen Plattformen ist die Unterstützung der Komponentenbibliothek für Miniprogramme offensichtlich nicht perfekt genug und die verschiedenen Frameworks sind noch nicht ausgereift. Da mich bei der vorherigen Verwendung des Frameworks verschiedene mysteriöse Fehler verwirrten, entschied ich mich, zur nativen Umgebung zurückzukehren.

Ich habe kürzlich untersucht, wie der Schiebemenüeffekt im nativen Framework implementiert werden kann. Ich dachte, es wäre sehr mühsam, aber ich stellte fest, dass nur ein paar Dutzend Codezeilen erforderlich sind und viele flexible Effekte analog erzielt werden können. Ich bin der Meinung, dass es im Internet nicht viele relevante Informationen gibt, deshalb möchte ich sie hier teilen. Zusätzlich zu den im Artikel veröffentlichten Codeblöcken können Sie über den Link auch eine Vorschau der Effekte anzeigen und die Codeausschnitte im Mini-Programmentwicklungstool ansehen. Hier werden drei gängige Effekte implementiert. Schauen wir uns zuerst das animierte Bild an und erklären dann nacheinander die Codeimplementierung.

Ein Menü oben

Das A2-Menü befindet sich auf der oberen Ebene und die untere Ebene ist maskiert

B Das Menü befindet sich unten

WXS-Antwortereignis

Das Prinzip des Gestensteuerungsmenüs ist sehr einfach: Das Applet bietet eine Reihe von Ereignissen, die durch Berührungsgesten ausgelöst werden, darunter touchstart, touchmove, touchend touchend) und so weiter. Indem Sie benutzerdefinierte Ereignisantwortfunktionen an diese Ereignisse binden, können Sie das Menü je nach Gesten öffnen und schließen.

Aus Leistungsgründen sollten Ereignisbehandlungsfunktionen besser in WXS als in JS-Dateien platziert werden. Das spezifische Prinzip hängt mit der Betriebsumgebung des Applets zusammen. Wenn Sie interessiert sind, können Sie es am Ende des Artikels nachlesen. WXS ist eine spezielle Skriptsprache für Applets (die Beziehung zwischen WXS und JS entspricht der Beziehung zwischen WXSS und CSS). Die Syntax ähnelt der von JS, es gibt jedoch einige Unterschiede, wie zum Beispiel:

• Isoliert von JS, kann weder in anderen JavaScript-Dateien definierte Funktionen aufrufen, noch kann es die vom Miniprogramm bereitgestellte API aufrufen
• Es kann nur auf Ereignisse integrierter Komponenten des Miniprogramms reagieren und unterstützt keine Ereignisrückrufe benutzerdefinierter Komponenten.
• Variablen und Funktionen sind standardmäßig privat für das Modul und werden der Außenwelt über module.exports zugänglich gemacht.
• Verwenden Sie Tags zum Importieren in WXML (es muss ein relativer Pfad verwendet werden).

Die grundlegenden Schreibmethoden in WXS-Dateien und WXML-Dateien sind wie folgt:

// index.wxs

Funktion touchStart(e, ins) {}
Funktion touchMove(e, ins) {}
Funktion touchEnd(e, ins) {}

modul.exporte = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}
<wxs module="Schublade" src="./index.wxs"></wxs>

<view bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{Schublade.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</Ansicht>

Plan A

Seitenstruktur und Stil

Dies ist einer der gängigsten Schubladenmenüstile. Der Hauptinhalt bewegt sich beim Verschieben nicht und das Menü wird auf der oberen Ebene angezeigt. Schreiben Sie zunächst die grundlegende HTML-Struktur und den CSS-Stil heraus (einige ästhetische Stylesheets werden weggelassen):

<wxs module="Schublade" src="./index.wxs"></wxs>

<Ansicht>
  <Ansichtsklasse="main" bindtouchstart="{{drawer.touchstart}}"
    bindtouchmove="{{drawer.touchmove}}" bindtouchend="{{drawer.touchend}}">
    <Ansicht>
      Schieben Sie nach rechts, um die Seitenmenülösung A anzuzeigen
    </Ansicht>
  </Ansicht>

  <view class="Schublade" data-drawerwidth="150">
    <view class="drawer-item">SchubladeA</view>
    <view wx:for="{{[1, 2, 3]}}" class="Schubladenelement">
      <text>Menüpunkt {{item}}</text>
    </Ansicht>
  </Ansicht>
</Ansicht>

Einige wichtige Punkte in WXML:

• Das wxs-Modul korrekt importieren (relativer Pfad muss verwendet werden)
• Beim Ausführen einer Wischgeste wird das Menü ausgeblendet, sodass die Wischbewegung tatsächlich auf der Hauptschnittstelle ausgeführt wird. Daher müssen die drei Rückrufe für Wischereignisse an die Ansicht des Hauptinhalts gebunden sein.
• Das .drawer-Element wird verschoben und das Klassenattribut muss für einen einfachen Zugriff festgelegt werden
• Das data-drawerwidth-Attribut des Schubladenelements wird über den Datensatz an das wxs-Skript übergeben, das die Breite des Menüs angibt und mit dem Stil übereinstimmen muss.

Zu WXSS gibt es nicht viel zu sagen, in den Kommentaren steht:

.hauptsächlich {
  Höhe: 100vh;
  Breite: 100 %;
  Position: absolut;
}

.Schublade {
  Höhe: 100vh;
  Breite: 150px;
  Position: absolut;
  Übergang: Transformation, 0,4 s langsam; /* Mit Transformation Verschiebung erreichen, Übergangsanimation hinzufügen, um sie flüssiger zu machen*/
  left: -150px; /* Breite und Offset entsprechen den Werten in WXML, im Ausgangszustand ist das Menü ausgeblendet*/
}

WXS-Ereignisrückruffunktion

Die wxs-Funktion hat zwei Eingabeparameter

• event ist das Applet-Ereignisobjekt und auf dieser Basis gibt es auch eine Instanz der Komponente, die das Ereignis auslöst event.instance
• ownerInstance ist die Instanz der übergeordneten Komponente (Seite) der Komponente, die das Ereignis ausgelöst hat

Die Komponenteninstanz in wxs ist ein gekapseltes ComponentDescriptor Objekt, das den Datensatz, den Stil, die Klasse usw. der Komponente bedienen kann, was für eine interaktive Animation grundsätzlich ausreicht. Weitere Informationen zur Verwendung finden Sie in der Dokumentation.

var wxsFunktion = Funktion(Ereignis, Besitzerinstanz) {
    var instance = ownerInstance.selectComponent('.classSelector') // Gibt die Instanz der Komponente zurück instance.setStyle({
        "Schriftgröße": "14px" // Unterstützt rpx
    })
    Instanz.getDataset()
    Instanz.setClass(Klassenname)

    return false // Nicht aufsteigen, was dem gleichzeitigen Aufruf von stopPropagation und preventDefault entspricht
}

WXS-Skripte

Hauptsächlich bedingtes Urteil, die Logik ist nichts Besonderes, es ist nicht schwer zu verstehen, wenn man es mit der Situation kombiniert

• Verwenden Sie zum Deklarieren von Variablen nicht „let“ oder „const“, da sonst eine Fehlermeldung angezeigt wird.
• Der Code zum Festlegen der X-Verschiebung des Transformationsattributs wird einfach gekapselt, damit er schöner aussieht.
• Der Judge Point-Effekt ähnelt dem Adsorptionseffekt, d. h. wenn das Menü über eine bestimmte Position hinaus gezogen wird, wird der verbleibende Teil automatisch geöffnet.

var Startmarke = 0;
var status = 0; // Menü geöffnet oder geschlossen Status var JUDGEPOINT = 0,7;

Funktion touchStart(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  Startmarke = SeiteX;
}

Funktion touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var Offset = SeiteX - Startmarke;
  var drawerComp = ins.selectComponent('.drawer');
  var Schubladenbreite = SchubladenComp.getDataset().Schubladenbreite;

  wenn (Offset > 0 und Status == 0) {
    setCompTransX(Schubladenkomp, Math.min(Schubladenbreite, Versatz))
  } sonst wenn (Offset < 0 und Status == 1) {
    setCompTransX(Schubladenkomp, Math.max(0, Offset))
  }
}

Funktion touchEnd(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var Offset = SeiteX - Startmarke;
  var drawerComp = ins.selectComponent('.drawer');
  var Schubladenbreite = SchubladenComp.getDataset().Schubladenbreite;

  wenn (Offset > 0 und Status == 0) {
    wenn (Versatz < Schubladenbreite * Richterpunkt) {
      setCompTransX(Schubladenkomp, 0);
    } anders {
      setCompTransX(SchubladenKomp, SchubladenBreite);
      Status = 1;
    }
  } sonst wenn (Offset < 0) {
    setCompTransX(Schubladenkomp, 0);
    Status = 0;
  }
}

Funktion setzeCompTransX(comp, x) {
  comp.setStyle({
    transformieren: 'translateX(' + x + 'px)',
  })
}

modul.exporte = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}

Maskenebene

Klicken Sie auf den Link am Anfang oder Ende des Artikels, um den vollständigen Code im Mini-Programmentwicklungstool anzuzeigen.

Die Maskenebene muss nur eine Ansicht zwischen dem Menü und dem Hauptcontainer hinzufügen:

<Ansichtsklasse="main"></Ansicht>
<Ansicht Klasse="Maske" data-maxopacity="0.6"></Ansicht>
<view Klasse="Schublade" data-drawerwidth="150"></view>

Die Eigenschaft pointer-events ist für den Stil sehr wichtig. Wenn sie auf none gesetzt ist, dringt die Klickaktion in die Ansicht bis zur unteren Ebene vor. Da die Maskenebene nicht wie die Schublade ist, befindet sie sich außerhalb des Bildschirms. Obwohl ihre Transparenz 0 ist, deckt sie .main tatsächlich die ganze Zeit ab. Wenn Sie dieses Attribut nicht hinzufügen, erfolgen alle Klicks auf .main auf .mask und Schiebe- oder andere Schaltflächen sind ungültig.

.Maske {
  Höhe: 100vh;
  Breite: 100 %;
  Position: fest;
  Übergang: Deckkraft 0,4 s Leichtigkeit;
  Deckkraft: 0;
  Zeigerereignisse: keine;
  Hintergrundfarbe: #548CA8;
}

Das wxs-Skript ist grundsätzlich dasselbe. Sie müssen nur die .mask-Instanz und den Transparenzparameter im Datensatz auf ähnliche Weise abrufen und das Transparenzattribut der Maskenebene festlegen, während Sie das Verschiebungsattribut festlegen.

Funktion setzeSchublade(x) {
  setCompTransX(Schubladenkomp, x);
  maskComp.setStyle({
    Deckkraft: x / Schubladenbreite * Maskendeckkraft,
  })
}

Plan B

Klicken Sie auf den Link am Anfang oder Ende des Artikels, um den vollständigen Code im Mini-Programmentwicklungstool anzuzeigen.

Der Hauptunterschied zwischen Lösung B und Lösung A besteht darin, dass sich die Hauptschnittstelle beim Gleiten nach rechts bewegt, um das untere Menü anzuzeigen, und dass die Implementierung anderer Teile nicht anders ist. Hier werden nur die wesentlichen Unterschiede aufgeführt.

Da das .main-Element verschoben wird, werden die Breitenkonfigurationsdaten im Tag des Elements platziert, sodass eine Komponenteninstanz weniger abgerufen werden kann.

<view class="Schublade"></view>

<Ansichtsklasse="main" 
      Datenschubladenbreite = "150" 
      bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{Schublade.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</Ansicht>

Die Eigenschaften der Übergangsanimation werden ebenfalls in .main platziert und der Offset von .drawer wird nicht mehr benötigt.

.hauptsächlich {
  Höhe: 100vh;
  Breite: 100 %;
  Position: absolut;
  Übergang: Transformation 0,4 s einfach;
}

.Schublade {
  Höhe: 100vh;
  Breite: 150px;
  Position: absolut;
}

Im wxs-Skript müssen, abgesehen von den unterschiedlichen erhaltenen Komponenten, nicht einmal die Verschiebungseinstellungen geändert werden.

Funktion touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var Offset = SeiteX - Startmarke;
  var mainComp = ins.selectComponent('.main');
  var Schubladenbreite = mainComp.getDataset().Schubladenbreite;

  wenn (Offset > 0 und Status == 0) {
    setCompTransX(Hauptkomp, Math.min(Schubladenbreite, Versatz))
  } sonst wenn (Offset < 0 und Status == 1) {
    setCompTransX(Hauptkomp, Math.max(0, Offset))
  }
}

Warum WXS verwenden?

Miniprogramme sind der Webentwicklung in vielerlei Hinsicht sehr ähnlich, unter der Haube gibt es jedoch einige Unterschiede. Auf Webseiten werden Rendering und Skriptausführung im selben Thread durchgeführt (die Ausführung von Skripten kann also zum Einfrieren der gesamten Seite führen). Miniprogramme führen die Logikebene (JS-Skripte) und die Renderingebene (WXML und WXSS) jeweils in unterschiedlichen Threads aus und die Threads kommunizieren über den Client (nativ).

Wenn Sie daher JS-Skripte verwenden, um auf Ereignisse zu reagieren, werden bei jedem Auslösen von Touchmove zwei Interprozesskommunikationen generiert (wie in der linken Abbildung unten gezeigt), und der Kommunikationsaufwand ist groß. Gleichzeitig „blockiert die SetData-Wiedergabe auch die Ausführung anderer Skripte“ (das steht so im Dokument, und ich weiß nicht, warum). Da eine Geste eine große Anzahl von Touchmove-Ereignissen auslöst, führen die oben genannten Gründe zu Animationsstaus.

Die WXS-Funktion wird auf der Ansichtsebene ausgeführt und weist das oben genannte Problem nicht auf (wie in der rechten Abbildung unten gezeigt).

Fazit & Referenzen

Oben sind mehrere Möglichkeiten aufgeführt, das Schubladenmenü nativer Applets zu implementieren. Ich hoffe, es wird Ihnen hilfreich sein. Sie können gerne etwaige Auslassungen im Artikel diskutieren und korrigieren.

Klicken Sie auf den Link, um den vollständigen Code im Mini Program Development Tool anzuzeigen (für die Freigabe von Codeausschnitten mithilfe des Mini Program Development Tools gelten bestimmte Anforderungen an die Version des Entwicklungstools). Der von ihm freigegebene Codeausschnitt ist etwas mysteriös. Wenn Sie ihn nicht direkt öffnen können, können Sie versuchen, den Link oder die letzte ID des Links nach der Anmeldung direkt in "Projekt-Import-Codeausschnitt" einzugeben.

Quellen:

Mini-Programm-Framework/Ansichtsebene/Ereignissystem/WXS-Antwortereignis

Offizielle Demo

Mini-Programm-Hostumgebung

Dies ist das Ende dieses Artikels über die native Implementierung des nach links verschiebbaren Schubladenmenüs in Miniprogrammen. Weitere relevante Inhalte zum nach links verschiebbaren Schubladenmenü in Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!