Share
In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit iScroll 4 eine einfache mobile Website erstellen. Die von uns erstellte Site hat eine feste Kopfzeile und eine feste Fußzeile mit Inhalten, die leicht zwischen den Bildern verschoben werden können. Wie wir sehen werden, ist es nicht so einfach, diesen Effekt auf Android und iOS zu erzielen!
Webbasierte Apps sind ein großartiger Ort für Frontend-Entwickler, um sich auf die Reise in die Welt der Entwicklung mobiler Anwendungen zu begeben. Mit Ihren vorhandenen Kenntnissen in HTML, CSS und Javascript können Sie Apps erstellen, die dem Aussehen und der Funktionsweise eines nativen Plattform-SDK sehr ähnlich sind. Darüber hinaus sind Ihre Anwendungen plattformübergreifend kompatibel und funktionieren auf jedem mobilen Gerät mit einem modernen Browser.
Natürlich gibt es einige Einschränkungen bei der Entwicklung für mobile Browser. Einige können offensichtlich sein, zum Beispiel die Unfähigkeit, die Gerätekamera (zumindest jetzt) zu erschließen. Andere sind möglicherweise nicht so offensichtlich, wie die schiere Anzahl von bereits verwendeten mobilen Browsern (die Vielfalt ist umwerfend).
Zwar gibt es eine Vielzahl von Frameworks (z. B. jQuery Mobile, SenchaTouch usw.), die Ihnen den Einstieg in mobile Web-Apps erleichtern können. Im Moment werde ich keines davon verwenden. Stattdessen konzentriere ich mich auf reines JavaScript mit einer praktischen Bibliothek: iScroll 4.
iScroll behebt ein Problem in den mobilen WebKit-basierten Browsern von Android und iOS. Beide Browser bieten keine Unterstützung für absolut positionierte Kopf- und Fußzeileninhalte, bei denen standardmäßig Bildlaufinhalte eingefügt werden. Das gesamte HTML-Dokument wird unabhängig von vorhandenem CSS gescrollt, um es anderweitig zu erreichen. Da viele native mobile Anwendungen mit einer festen Navigationsleiste am oberen Bildschirmrand und einer festen Symbolleiste oder Registerkartenleiste am unteren Rand des Bildschirms ausgestattet sind, ist diese fehlende Unterstützung für festen Inhalt in den WebKit-Browsern wirklich ein Problem. Keine Sorge: In diesem Tutorial zeige ich Ihnen, wie Sie dieses Layout mit iScroll erreichen.
Lassen Sie uns ein grundlegendes Layout der Web-App einrichten. Dies ist eine ziemlich einfache Seite und in keiner Weise ein Markup in Produktionsqualität, aber für diese Demo wird es gut funktionieren.
Ich starte im Allgemeinen die meisten mobilen Web-Apps (ich bezeichne diese als Webile Apps) mit derselben Basisvorlage (vorausgesetzt, ich verwende keine HTML5-Plattform oder ein anderes Framework). Die einzigen Metatags, die ich anfangs verwende, sind das Festlegen der Skalierungsoptionen im Ansichtsfenster. Ich füge auch ein wenig "Reset" zu den Elementen hinzu, die ich kenne Ich verwende sehr selten einen CSS-Reset für Webile Apps, da dies bei einem mobilen Gerät im Allgemeinen zu viel ist. Sobald Sie mit der Optimierung beginnen, ist weniger normalerweise mehr.
Web-App-Vorlage Web-App-Vorlage
Jetzt können wir ein paar grundlegende CSS hinzufügen, um ein schönes Layout für die Kopf- und Fußzeile zu erhalten.
body font-family: helvetica; header position: absolut; z-Index: 2; oben: 0; links: 0; Breite: 100%; Höhe: 45px; Hintergrundfarbe: # deb500; Polsterung: 0; Fußzeile Position: absolut; z-Index: 2; unten: 0; links: 0; Breite: 100%; Höhe: 48px; Hintergrundfarbe: # c27b00; Polsterung: 0; Border-Top: 1px fest # 444; Kopfzeile, Fußzeile font-size: 20px; Text ausrichten: Mitte; Farbe: # f3f3f3; Schriftdicke: fett; Text-Schatten: 0 -1px 0 rgba (0,0,0,0,5); Zeilenhöhe: 45px;
Sie sollten jetzt etwas haben, das so aussieht. Beachten Sie, dass wir der Kopf- und Fußzeile einen Z-Index gegeben haben. Dies wird etwas mehr ins Spiel kommen.
Nun ist es Zeit, den Inhalt hinzuzufügen, den wir scrollen lassen möchten. Ich habe eine einfache Liste verwendet, aber der Inhalt kann beliebig sein. Wir müssen sicherstellen, dass alles, was wir scrollen möchten, in einen Container mit einer ID verpackt ist, die wir für die Anbindung an iScroll verwenden. Dies befindet sich im DIV mit der ID des Wrappers, den wir in Schritt 1 eingerichtet haben.
- Einige Sachen
- Mehr Zeug
- Große Dinge
- Kleines Zeug
- Geek Stuff
- Nerd Zeug
- Schnelles Zeug
- Langsames Zeug
- Gutes Zeug
- Schlechte Dinge
- Dein Zeug
- Meine Sachen
- Ihre Sachen
- Unser Zeug
- Super Zeug
- Über alles
- Zeug Zeug
- Französisch Zeug
- Deutsche Sachen
- Englisch Zeug
- Amerikanisches Zeug
- Zeug
Und dann geben wir der Liste ein paar nette CSS, damit sie weniger langweilig wirkt. Außerdem positionieren wir den Wrapper absolut mit einem niedrigeren Z-Index als die Kopf- und Fußzeile.
#wrapper position: absolut; z-Index: 1; oben: 45px; unten: 48px; links: 0; Breite: 100%; Hintergrund: #aaa; Überlauf: Auto; # scroll-content position: absolut; z-Index: 1; Breite: 100%; Polsterung: 0; ul list-style: none; Polsterung: 0; Marge: 0; Breite: 100%; Text ausrichten: links; li padding: 0 10px; Höhe: 40px; Zeilenhöhe: 40px; Rahmen unten: 1px fest #ccc; border-top: 1px fest #fff Hintergrundfarbe: #fafafa; Schriftgröße: 14px;
Wie Sie sehen, haben wir dem Wrapper einen Überlauf gegeben: auto, der uns in einem Browser das Scrollen des Wrappers ermöglichen würde - aber wenn Sie Ihr Gerät einchecken?
Wir haben keine Möglichkeit zu scrollen. Dies ist genau das Problem, das von iScroll behoben wurde. Lassen Sie uns es also herausfinden.
Hinweis: Wenn Sie die URL-Leiste oben in Ihrer Anwendung (nur NUR iOS) entfernen möchten, können Sie den folgenden META-TAG hinzufügen.
Wenn nun ein Benutzer die Anwendung zu seinem Startbildschirm hinzufügt, kann er sie wie jede andere Anwendung vom Betriebssystem aus starten, und die URL-Leiste wird nicht gerendert.
Ein alternativer Ansatz zum Entfernen der URL-Leiste ist die von Mark Hammonds im Tutorial Vollbild-Web-Apps beschriebene Methode. Diese Methode ist eine gute Methode, die JavaScript zum automatischen Ausblenden der Adressleiste verwendet. Im Moment werde ich die META TAG-Methode verwenden, da sie schön sauber ist und neben der Adressleiste die untere Schaltflächenleiste entfernt.
Gehen Sie zur iScroll-Homepage und laden Sie die Quelle herunter. Bei iScroll 4 handelt es sich um die neueste Version zum Zeitpunkt des vorliegenden Schreibens und um die Version, die wir verwenden werden. Entpacken Sie den Dateidownload und packen Sie die Datei iscroll-lite.js. Da wir nur die grundlegende Scrollfunktion verwenden, brauchen wir dies nicht. Legen Sie die Datei in das gewünschte Verzeichnis ab. Fürs Erste werde ich es in die Wurzel des Projekts legen.
Zunächst importieren wir die Datei iscroll-lite.js in unser Projekt. Importiere es entweder oben (die
) oder der Boden (kurz vor dem ) des HTML. Ich bevorzuge es, ihn unten zu importierenAls Nächstes richten wir eine Funktion ein, die iScroll einleitet und in den Wrapper einhakt. Schließlich fügen wir dem Dokument einen Ereignis-Listener hinzu, um auf das Laden des Inhalts zu warten, bevor iScroll von unserer Funktion abgezogen wird.
Wenn Sie Ihr Gerät jetzt überprüfen, sollten Sie eine schöne scrollbare Liste mit einer festen Kopf- und Fußzeile haben.
Hier ist der vollständige schriftliche Code, der in diesem Tipp verwendet wird.
Web-App-Vorlage Web-App-Vorlage
- Einige Sachen
- Mehr Zeug
- Große Dinge
- Kleines Zeug
- Geek Stuff
- Nerd Zeug
- Schnelles Zeug
- Langsames Zeug
- Gutes Zeug
- Schlechte Dinge
- Dein Zeug
- Meine Sachen
- Ihre Sachen
- Unser Zeug
- Super Zeug
- Über alles
- Zeug Zeug
- Französisch Zeug
- Deutsche Sachen
- Englisch Zeug
- Amerikanisches Zeug
- Zeug
Accentsconagua