Vorwort
In den Arbeiten der letzten beiden Kapitel haben wir die Homepage -Rendering erfolgreich implementiert, aber es wurde nur eine Datenseite gemacht. Möglicherweise müssen wir mehr Daten rendern, daher müssen wir zu diesem Zeitpunkt Paging in Betracht ziehen.
Paging gibt viele Möglichkeiten, wie z. B. asynchrones Laden. Für Freunde, die das Front-End-Vorlagen-Framework nicht verwenden, ist es möglicherweise etwas schwierig, diese Methode zu verwenden, sobald sie beginnen. Daher basiert die Paging -Implementierung unseres Kapitels auf normalem Link -Paging.
Nachdem wir mehr Erfahrung in der Verwendung von Front-End-Frameworks haben, können wir eine reichhaltigere Paginierungsmethode verwenden.
Tatsächlich ist es für uns nicht unmöglich, selbst eine Paging -Komponente zu bauen. Auf der mobilen Seite implementiere ich es nach meinem eigenen Code. Ich möchte hier jedoch empfehlen, das Layout -Seiten -Plugin und die offizielle Website zu verwenden (http://laypage.layui.com/).
Paging -Regelnentwicklung
Schauen wir uns zunächst die Schnittstellenbeschreibung an
Hier ist die Get -Schnittstelle. Wie in der obigen Abbildung gezeigt, besteht daher die korrekte Möglichkeit, Parameter nach der URL der Schnittstelle direkt anzuhängen.
http://cnodejs.org/api/v1/topics?page=11
OK, dann kann unsere URL -Adresse //xxx/index.shtml?1 sein, da ich nicht plane, andere Parameter zu verwenden, sondern nur die Pagination abschließen. Daher können Sie die Paginations -ID nach ihr direkt hinzufügen und die ID in der URL über eine Funktion erhalten und an die Schnittstelle anhängen, damit unsere Anforderungen realisiert werden können.
Schreiben Sie Code zum Implementieren!
Holen Sie sich die ID in der URL
Wie ich oben dachte, brauchen wir eine Funktion, die die ID, die wir an die URL -Adresse anhängen, korrekt erhalten können, um Sie gut zu begrüßen.
Funktion geturlid () {var host = window.location.href; var id = host.substring (host.indexof ("?")+1, host.length); return id;}Wie im obigen Code gezeigt, können wir über diese Funktionsmethode die ID erhalten, die wir nach der URL angehängt haben, und sie testen
$ (function () {var id = getUrlid (); console.log (id); var url = "http://cnodejs.org/api/v1/topics"; getJson (url, pushdom);});Wie in der Abbildung unten gezeigt:
Wir erhalten unterschiedliche Daten über ID
$ (function () {var id = geturlid (); var url = "http://cnodejs.org/api/v1/topics?page="+Id; getJson (url, pushdom);});Wie oben erwähnt, können Sie unterschiedliche Daten gemäß verschiedenen URLs erhalten.
Verwenden Sie das Layout, um die Paginierung zu implementieren
Zunächst einmal soll die Datei verweisen.
<script src = "res/js/plugins/laypage/laypage.js"> </script>
Fügen Sie im entsprechenden Teil des HTML die Box wie folgt zur Paging -Komponente hinzu:
<div> </div>
Dann kopieren wir den Code auf der offiziellen Website. Ändern Sie es angemessen, und der Code ist wie folgt
$ (function () {var id = getUrlid (); var url = "http://cnodejs.org/api/v1/topics?page="+ id; getJson (url, pushdom); layout ({cont: $ (". '?'+e.curr;}}});})Der endgültige Effekt ist in der folgenden Abbildung dargestellt:
Zusammenfassung
In diesem Kapitel hat unser Inhalt tatsächlich wenig mit Vue zu tun. Unabhängig davon, welche Inhalte verwendet werden, zielt er letztendlich darauf ab, das Projekt abzuschließen. Die Verwendung bereits entwickelter Plug-Ins kann unsere Effizienz erheblich verbessern.
Anhang
Vue offizielle Website
CnodeJS -API -Details
Laden Sie den Quellcode dieser Reihe von Tutorials herunter
Kapitel 1 des VueJS Practical Tutorial, den Aufbau der Grundlagen und das Rendern der Liste
VueJS Practical Tutorial Kapitel 2, Fehler beheben und die Zeit verschönern
VueJS Practical Tutorial Kapitel 3 mit dem Layout-Plug-In, um die Pagination zu realisieren
Dieser Artikel wurde ursprünglich von Fungleo geschrieben
Erste Veröffentlichungsadresse: http://blog.csdn.net/fungleo/article/details/51649074
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.