So implementieren Sie Paging-Komponenten in Vue

In diesem Artikel wird hauptsächlich der Beispielcode einer Paging-Komponente von Vue vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Paging-Komponenten werden häufig in Projekten verwendet. Im Internet habe ich immer einige JQ-Steuerelemente gefunden, die ich verwenden konnte (Escape ...). In letzter Zeit haben mehrere Projekte Vue verwendet und das Projekt benötigt lediglich eine Paging-Funktion. . Die Details sind wie folgt:

Die Datei page.vue ist eine PC-seitige Paging-Komponente. Sie verfügt über grundlegende Paging-Funktionen. Die Grundidee besteht darin, dass die Seite mit Daten angezeigt wird, sodass die relevanten Daten direkt bedient werden können Ansicht ändern

Erste Schritte

Seite aus './page.vue' importieren Importieren Sie die Datei aus dem Verzeichnis und registrieren Sie sie mit

in der übergeordneten Komponente

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

total: Gesamtseitenzahl
currentIndex: aktuelle Seitenzahl
listLen: wie viele Listenseiten die Seiten-UI anzeigen soll
getPage: Die Seitenkomponente sendet die Seitenzahl jedes Ereignisses an die übergeordnete Komponente , das verwendet wird, um relevante Anfragen an den Hintergrund zu senden, um den Inhalt anzuzeigen

über page.vue

HTML-Abschnitt

<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>

Verwandt Datenbeschreibung

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
  }
 },

Methodenereignis, die Hauptidee besteht darin, das erste und letzte Element der aktuellen Listenseite zu beurteilen. Verwenden Sie eine Schleife, um den Wert des arr-Mitglieds zu durchlaufen bash

# install dependencies
npm install

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

# build for production with minification
npm run build

Ich habe zuvor eine ähnliche Komponente mit ember.js geschrieben. Die Komponente ist jetzt auf Basis von vue2.0 gekapselt und kann in Zukunft in verschiedenen Projekten verwendet werden

Kleine Zusammenfassung: Ich bin schon einmal mit ng4 in Kontakt gekommen und habe festgestellt, dass diese ähnlichen Frameworks Übergangsanimationen und Seitenanzeigen ausschließen. Die Seite wird durch vom Hintergrund gesendete oder vom Frontend simulierte Daten gerendert Teil der Verbindung, und es ist auch die Grundidee dieser Art von Framework.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Über die virtuelle Bildlaufleiste 2.x in vue.js

So laden Sie Excel-Dateien mit der AngularJS-Funktion herunter

So konfigurieren Sie die Konfiguration in Vue (ausführliches Tutorial)

So implementieren Sie Multi-Objekt-Bewegung in JS (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Paging-Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!