Heim > Artikel > Web-Frontend > Javascript Slip.js implementiert mobile Webseiten im Vollbildmodus. Javascript-Fähigkeiten

Javascript Slip.js implementiert mobile Webseiten im Vollbildmodus. Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:29:501370Durchsuche

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:

Slip: Eine Methode, die der ganzen Welt zugänglich gemacht wird. Solange Sie slip.js einführen, können Sie diese praktische und großartige Methode erhalten.
Container: Der zu verschiebende Container enthält jede verschiebbare Seite.
'y': Die Richtung des Seitengleitens, Sie können auch 'x' übergeben.
Webapp: So stellen Sie die Seite so ein, dass sie als Vollbild-Schiebeseite angezeigt wird.
Seiten: Liste der Seitenelemente.

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 .

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS-Abschlussinterviewfragen, die Sie durch unfallbedingte Javascript-Kenntnisse falsch machen könnenNächster Artikel：JS-Abschlussinterviewfragen, die Sie durch unfallbedingte Javascript-Kenntnisse falsch machen können

In Verbindung stehende Artikel

Mehr sehen