So implementieren Sie ein Einkaufszentrum mit Vue

In diesem Artikel wird hauptsächlich der auf Vue, Vuex und Vue-Router basierende Shopping-Mall-Effekt (native Switching-Animation) vorgestellt

Online-Adresse: github.czero.cn/fancy

Klicken Sie hier, um das Android-Apk-Installationspaket herunterzuladen

Quellcode-Adresse: github.com/ czero1995/f…

Hauptstruktur des Projekts

Verwendete Bibliotheken

vue-cli (vue+ Webpack-Gerüst)

• vue-router (Routensprung)

• vuex (Zustandsverwaltung)

• axios (Datenanfrage)

• mock.js (Simulationshintergrunddaten)

• vue-touch (Gestenbeurteilung)

• fastclick (löst das 300-Millisekunden-Klickverzögerungsproblem mobiler Browser)

• vue-lazyload (verzögertes Laden von Bildern)

• Swiper (Karussell)

• Design-Layout:

Ändern Sie alle festen Layoutpositionen (z. B. Kopf- und Fußzeile) der Seite in die absolute Layoutposition :absolute;

Da es bei der Behebung unerklärliche Kompatibilitätsprobleme gibt, schlägt es beispielsweise unter ios11 oder ios8 fehl. Nachdem die Softtastatur des Eingabefelds aktiviert wurde, wird die feste Positionierung unten angezeigt das Layout ungeordnet sein.

Einzelheiten zur Verwendung von absolutem zur Implementierung von Fixed finden Sie in diesem Artikel

HTML5

• CSS3

• Less

• rem (der von Ali verwendete rem-Algorithmus)

• Flex (flexibles Layout)

• vue-touch (wird verwendet, um die Löschfunktion des Warenkorbs durch Wischen nach links zu realisieren) *Animation (vue nativer Übergang, um den Effekt einer nativen App zu erzielen)

• Datenanforderung:

Mock (Simulationshintergrunddaten)

• Axios ( Daten anfordern)

• Logische Interaktion:

vue (Datenrendering, Wertübertragung zwischen Komponenten)

• vue-router (zwischen Komponenten Routensprung)

• vuex (Global State Management)

• Optimierungsplan:

Tencent Zhitu (komprimiert Bilder, reduziert die Größe von Bildern)

• vue-lazyload (verzögertes Laden von Bildern , erleichtert das Laden von Daten, verbessert die Webseitenleistung)

• Fastclick (löst die 300-ms-Verzögerung auf der mobilen Seite und verbessert die reibungslose Seiteninteraktion)

• vue-rouer (verzögertes Laden von Routen, Trennung) Das js der App besteht aus mehreren js-Dateien. Gehen Sie zur entsprechenden Seite und führen Sie das entsprechende js aus)

• Webpack (die ProductionSourceMap in der Datei config/index.js wird auf „false“ geändert, sodass sie gepackt wird. Die Datei darf keine js-Dateien mit der Endung .map enthalten und die Dateigröße wird um mindestens die Hälfte reduziert)

Implementierungsdetails

Vergleichbare native Seite-Vorwärts- und Rückwärtsanimationsimplementierung:

Übergang angeben:Name

Deklarieren Sie die Standard-In- und Out-Animation in Daten

Nachdem die Initialisierung der mount()-Datenwiedergabe abgeschlossen ist, treffen Sie eine Beurteilung

Erhalten Sie den Statuswert von vuex

Dann fällen Sie ein Urteil

Übergeben Sie abschließend den aktuellen Komponentennamen an vuex , sodass verschiedene Komponenten unterschiedliche Schaltanimationen haben können.

Animation der nächsten Seite

.slide-go-enter-active,
.slide-go-leave-active {
 transition: all .5s;
 opacity: .8;
}
.slide-go-enter,
.slide-go-leave-to {
 transition: all .5s;
 transform: translate3d(100%, 0, 0);
 opacity: .8;
}

Zurück zur vorherigen Seitenanimation

.slide-back-enter-active,
.slide-back-leave-active {
 transition: all .5s;
}
.slide-back-enter,
.slide-back-leave-to {
 transition: all .5s;
 transform: translate3d(-100%, 0, 0);
}

Zum Löschen im Warenkorb nach links wischen

v -touch

Stellen Sie den Offset der Löschschaltfläche in CSS ein

-webkit-transform: translate(-12%, 0);
-webkit-transition: all 0.3s linear;

Nach links und rechts wischen

Lösen Sie den ausgewählten Stil aus, wenn Schieben, binden

, sodass das aktuelle Listenelement == die Warenkorbliste ist, der Stil aktiviert wird und ein Wischen mit der linken Maustaste zum Löschen angezeigt wird

Hinweis Das Feld der Seite kollidiert mit der nativen Seite, nachdem das Feld verwendet wurde, was zu einem ungleichmäßigen Gleiten führt

Daher ist es notwendig, die Standard-Gleitmethode in main.js als horizontalen Gleitauslöser anzugeben

Klicken Sie auf der Bestellseite auf die obere Navigation und wischen Sie nach links und rechts, um Komponenten zu wechseln und Animationsstile zu beurteilen

verwendet auch die V-Touch-Komponente, und die Implementierung ähnelt dem Komponentenwechsel. Ich gebe jeder Bestellstatuskomponente eine andere Nummer. Anhand dieser Nummer kann ich feststellen, ob es sich bei der Komponente um eine Linksschiebeanimation oder eine Schiebeanimation handelt

Das Obige Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Es gibt mehrere Werte von Bind-Variablen in Vue und Methoden, um zu verhindern, dass sie sich ändern (ausführliches Tutorial)

Einführung in den Unterschied zwischen der Verwendung von var foo = function () {} und function foo() zum Definieren von Funktionen in JavaScript (ausführliches Tutorial)

Detaillierte Erklärung zum Schreiben einer einfachen Befehlszeile mit Node.js Tools (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Einkaufszentrum mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!