Comment implémenter les composants de pagination dans vue

Cet article présente principalement l'exemple de code d'un composant de pagination de Vue. Maintenant, je le partage avec vous et le donne comme référence.

Les composants de pagination sont souvent utilisés dans les projets. Avant, je trouvais toujours des contrôles jq sur Internet à utiliser (escape...). Récemment, plusieurs projets ont utilisé Vue et le projet a juste besoin d'une fonction de pagination. . Les détails sont les suivants :

Le fichier page.vue est un composant de pagination côté PC. Il possède des fonctions de pagination de base. L'idée de base est que la page est affichée avec des données, donc exploitez directement les données pertinentes pour. changer la vue

Démarrer

importer la page depuis './page.vue' Importez le fichier depuis le répertoire et enregistrez-le dans le composant parent en utilisant

<page :total=&#39;total&#39; :current-index="currentIndex" :listLen=&#39;listLen&#39; @getPage=&#39;getPage&#39;></page>

total :Numéro total de page
currentIndex : Numéro de page actuel
listLen : Combien de pages de liste l'interface utilisateur de la page doit afficher
getPage : Le composant de page envoie le numéro de page de chaque événement au composant parent, qui est utilisé pour envoyer des requêtes pertinentes en arrière-plan pour afficher le contenu

à propos de page.vue

partie html

<ul class="item" v-show="arr.length">
    <li @click="start">首页</li>
    <li @click="pre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><<</a></li>  上一列表页
    <li @click="currentPre"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><</a></li>   点解当前列表页上一页
    <li v-for="(item,index) in arr" :class="{active: item===num}" @click="getPage(item)">{{item}}</li>
    <li @click="currentNext"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >></a></li>  点解当前列表页下一页
    <li @click="next"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >>></a></li>  下一列表页
    <li @click="end">尾页</li>
  </ul>

Description des données associées

data() {
  return {
   num: Number, //表示当前页码高亮
   arr: [], //页面显示的数组
   page: Number, //一页显示多少个,可以自定义,不能大于总页码
   Remainder:Number, //是否整除
   merchant:Number, // 比较总页数和page页
  };
 },
 props: {
  //分页的总数
  total: {
   type: Number,
   default: 5
  },
  //当前页
  currentIndex: {
   type: Number,
   default: 1
  },
  //一个列表页显示多少页码
  listLen:{
   type: Number,
   default: 5
  }
 },

méthodes, l'idée principale est de déterminer le premier et le dernier élément de la page de liste actuelle. Utilisez une boucle pour modifier la valeur de l'arr. membre

bash

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

avant d'écrire un composant similaire en utilisant ember.js, et maintenant je l'encapsule basé sur vue2.0, afin qu'il puisse être utilisé dans différents projets du futur et peut être utilisé directement.

Petit résumé : je suis également entré en contact avec ng4 auparavant et j'ai trouvé ces frameworks similaires Hors animations de transition, l'affichage de la page est rendu via des données envoyées depuis l'arrière-plan ou simulées par le front-end Bien entendu, ce n’est qu’une petite partie de la connexion, et c’est aussi l’idée de base de ce type de framework.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

À propos de la barre de défilement virtuelle 2.x dans vue.js

Comment télécharger des fichiers Excel à l'aide de la fonction AngularJS

Comment configurer la configuration dans vue (tutoriel détaillé)

Comment implémenter le mouvement multi-objets en JS (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!