Préface
Dans les travaux des deux chapitres précédents, nous avons réussi à implémenter le rendu de la page d'accueil, mais cela ne faisait que rendre une page de données. Nous devrons peut-être rendre plus de données, donc pour le moment, il est nécessaire que nous envisageons de paginer.
Il existe de nombreuses façons de paginer, comme le chargement asynchrone. Cependant, pour les amis qui n'utilisent pas le cadre du modèle frontal, il peut être un peu difficile d'utiliser cette méthode dès qu'ils commencent. Par conséquent, la mise en œuvre de la pagination de notre chapitre est basée sur la pagination de liens ordinaires.
Après avoir plus d'expérience dans l'utilisation des cadres frontaux, nous pouvons utiliser une méthode de pagination plus riche.
En fait, il n'est pas impossible pour nous de construire nous-mêmes un composant de pagination. Du côté mobile, je l'implémente par mon propre code. Cependant, ce que je veux recommander ici, c'est d'utiliser le plugin de page de mise en page, et son site officiel est (http://laypage.layui.com/).
Développement de règles de pagination
Tout d'abord, jetons un coup d'œil à la description de l'interface
Voici l'interface Get. Par conséquent, comme indiqué dans la figure ci-dessus, la bonne façon de demander est d'ajouter directement les paramètres après l'URL de l'interface.
http://cnodejs.org/api/v1/topics?page=11
Ok, alors notre adresse URL peut être //xxx/index.shtml?1 parce que je ne prévois pas d'utiliser d'autres paramètres, complétez simplement la pagination. Par conséquent, vous pouvez ajouter directement l'ID de pagination après, puis obtenir l'ID dans l'URL via une fonction et l'ajoutant à l'interface, afin que nos besoins puissent être réalisés.
Écrivez du code pour implémenter!
Obtenez l'ID dans l'URL
Comme je le pensais ci-dessus, nous avons besoin d'une fonction qui peut correctement obtenir l'ID que nous ajoutons à l'adresse URL pour bien vous saluer.
function getUrLid () {var host = window.location.href; var id = host.substring (host.indexof ("?") + 1, host.length); ID de retour;}Comme indiqué dans le code ci-dessus, via cette méthode de fonction, nous pouvons obtenir l'ID que nous avons ajouté après l'URL et le tester
$ (function () {var id = getUrLid (); console.log (id); var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);});Comme indiqué dans la figure ci-dessous:
Nous obtenons différentes données via ID
$ (function () {var id = getUrLid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom);});Comme mentionné ci-dessus, vous pouvez obtenir différentes données selon différentes URL.
Utiliser la mise en page pour implémenter la pagination
Tout d'abord, c'est bien sûr de référencer le fichier.
<script src = "res / js / plugins / LayPage / LayPage.js"> </ script>
Dans la partie appropriée du HTML, ajoutez la boîte au composant de pagination, comme suit:
<div> </div>
Ensuite, nous copie le code sur le site officiel. Modifiez-le de manière appropriée et le code est le suivant
$ (function () {var id = getUrLid (); var url = "http://cnodejs '?' + e.curr;}}});})L'effet final est illustré dans la figure ci-dessous:
résumé
Dans ce chapitre, notre contenu a en fait peu à voir avec Vue. Cependant, quel que soit le contenu utilisé, il vise finalement à terminer le projet. L'utilisation de plug-ins déjà développés peut améliorer considérablement notre efficacité.
appendice
Site officiel de Vue
Détails de l'API CNODEJS
Téléchargez le code source de cette série de tutoriels
Chapitre 1 du tutoriel pratique Vuejs, construire les bases et rendre la liste
Vuejs Practical Tutorial Chapter 2, corriger les erreurs et embellir le temps
Vuejs Practical Tutorial Chapter 3, en utilisant le plug-in de mise en page pour réaliser la pagination
Cet article a été initialement écrit par Fungleo
Adresse de première version: http://blog.csdn.net/fungleo/article/details/51649074
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.