Mit Slip.js müssen Sie nur HTML und CSS schreiben. Wenn die Logik einfach ist, kann dies mit einer Zeile JS-Code erfolgen, was die Effizienz der Entwicklung erheblich verbessert. Ich möchte nicht prahlen, ich habe die obige Demo in weniger als einer halben Stunde geschrieben.
Wie geht das konkret? Beispielsweise gibt es eine Anforderung:
Wir haben 4 Seiten, jede Seite hat ein Bild und jedes Mal, wenn Sie mit dem Finger darüber gleiten, wechselt der gesamte Bildschirm.
Schauen Sie sich zuerst den HTML-Code an:
<!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body> ... <div id="container"> <div class="page page-1"><img src="img/1.png"></div> <div class="page page-2"><img src="img/2.png"></div> <div class="page page-3"><img src="img/3.png"></div> <div class="page page-4"><img src="img/4.png"></div> </div> </body>
Letzter Blick auf JS:
var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);Kommentar:
Alles ist mit einer Codezeile erledigt:
Slip(document.getElementById('container'), 'y').webapp();
Sie können feststellen, dass die obige Codezeile keine Seiten definiert:
Wenn die Webapp-Methode keine Parameter übergibt, erhält Slip die direkten untergeordneten Elemente (Sohnelemente) des Containers als Seiten.
An diesem Punkt ist eine gleitende Vollbild-Webseite fertiggestellt, die unvorstellbar einfach und schnell ist. Ich brauche dafür eine halbe Stunde, aber Sie sollten es in 10 Minuten schaffen.
Natürlich: Slip.js verfügt über viele weitere leistungsstarke Funktionen. Sie können beispielsweise festlegen, was zu tun ist, wenn die Seite per PM gesehen hat, dass Sie es so schnell abgeschlossen haben. Daher habe ich sehr interessante Anforderungen für Sie hinzugefügt:
Wenn die Seite zur letzten Seite wechselt, aktualisieren Sie sie. . .
Sie müssen nur ein paar Codezeilen hinzufügen, um es zu erledigen:
Slip(document.getElementById('container'), 'y').webapp().end(function() {
if (this.page === 3) location.reload();
});
Sehen Sie, ist es nicht ganz einfach? Ist es erledigt, bevor ich überhaupt Zeit habe, mich über diese Anforderung zu beschweren?
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er Ihnen allen gefällt. Ich hoffe, dass Sie ihn in Zukunft nicht verpassen werden .
