Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解

更新時間：2018年01月10日 11:18:55 作者：透筆度_tbd

這篇文章主要介紹了Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解,需要的朋友可以參考下

一.介紹

Vue.js 是什么

Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

二.創(chuàng)建初始化項目

這里不在詳細(xì)說明，我們的分頁演示只需要vue和vue-router就可以了，我們直接構(gòu)建項目和設(shè)置配置。

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （縮寫）相當(dāng)于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:

<template>
 <div id="app">
 <h3>{{msg}}</h3>
 <ul>
 <li><router-link to="/">pageHome</router-link></li>
 <li><router-link to="/pageNews">pageNews</router-link></li>
 <li><router-link to="/pageInfo">pageInfo</router-link></li>
 </ul>
 <div>
 <router-view></router-view>
 </div>
 </div>
</template>
<script>
export default {
 name: 'app',
 data () {
 return {
 msg: '分頁組件：DiVuePage '
 }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

pageHome.vue:

<template>
 <div class="page">
 <p>//模擬ajax數(shù)據(jù) 1-7頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1-7頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageInfo.vue:

<template>
 <div class="page">
 <p>//模擬ajax數(shù)據(jù) 1-3頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageInfo',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1-3頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=3
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=3
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=3
 nextpage=false; 
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageNews.vue:

<template>
 <div class="page">
 <p>模擬ajax數(shù)據(jù) 1頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageNews',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"}
 ]
 allpage=1
 nextpage=false;
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

預(yù)覽效果：

三.分頁靜態(tài)結(jié)構(gòu)和樣式

divuePage.vue:

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn">第一頁</div>
 <div class="DiReactPage-btn disable">上一頁</div>
 <div class="DiReactPage-page">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <div class="DiReactPage-btn">下一頁</div>
 <div class="DiReactPage-btn">最后一頁</div>
 <div class="DiReactPage-btn">總4頁</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳轉(zhuǎn)</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 data () {
 return {
 pages:[1,2,3,4,5]
 }
 },
 methods:{
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

main.js注冊：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注冊組件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （縮寫）相當(dāng)于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

pageHome.vue引用：

<template>
 <div class="page">
 <p>//模擬ajax數(shù)據(jù) 1-7頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 <divue-page></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1-7頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

效果預(yù)覽：

四.分頁組件實現(xiàn)邏輯分析

我們分析一下如何實現(xiàn)我們的分頁組件：

從分頁組件考慮：

分頁組件需要顯示頁數(shù)，那么就需要傳遞給分頁組件總用多少頁這個狀態(tài)，

上一頁和下一頁存在不可用狀態(tài)，在第一頁上一頁不可用，所以要把當(dāng)前所在頁數(shù)傳遞，同樣頁數(shù)的焦點位置也需要它判斷，

然后就是方法，我們頁數(shù)和按鈕的點擊都是發(fā)起請求，攜帶的參數(shù)就是當(dāng)前點擊的頁數(shù)，

1.總頁數(shù)，當(dāng)前所在頁，可在父組件傳遞進(jìn)入

2.發(fā)起請求的方法可以通過組件交互通信實現(xiàn)

1的數(shù)據(jù)都是接口會返回給我們的，我們直接以屬性傳遞即可：

2的實現(xiàn)也很簡單，我們其實已經(jīng)處理模擬使用過了：

我們只需要自定義事件，讓分頁組件$emit即可：

pageHome.vue:

<template>
 <div class="page">
 <p>//模擬ajax數(shù)據(jù) 1-7頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1-7頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

五.分頁組件邏輯編寫

divuePage.vue我們接受了這些傳遞的內(nèi)容，總頁數(shù)和當(dāng)前所在頁，然后點擊第一頁觸發(fā)自定義事件，傳遞給父組件一個1，獲取第一頁數(shù)據(jù)：

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
 <div class="DiReactPage-btn disable">上一頁</div>
 <div class="DiReactPage-page">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <div class="DiReactPage-btn">下一頁</div>
 <div class="DiReactPage-btn">最后一頁</div>
 <div class="DiReactPage-btn">總4頁</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳轉(zhuǎn)</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//點擊第一頁 
 this.$emit("getajaxlist",1);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

1.頁數(shù)顯示

我們的首要工作就是把頁數(shù)顯示出來，我們已經(jīng)接收了總頁數(shù)，其實這個問題很容易解決，我們設(shè)置一個計算屬性，屬性依據(jù)總頁數(shù)生成一個數(shù)組，從1到n即可：

顯示：

這樣還不夠健壯，還有一個就是總頁數(shù)5做分界線，大于5就顯示當(dāng)前到后4個，

比如在第3頁，顯示：3 4 5 6 7

第2頁，顯示：2 3 4 5 6

好了我們加入一些小的邏輯判斷：

我們要給當(dāng)前頁加一個類名標(biāo)識，已經(jīng)獲取當(dāng)前的頁數(shù)了，我們加一個判斷就可以了，在v-for中：

我們在加入點擊事件，拿到點擊的item就是要請求后臺數(shù)據(jù)的參數(shù)page:

定義這個方法：

完整代碼：

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
 <div class="DiReactPage-btn disable">上一頁</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn">下一頁</div>
 <div class="DiReactPage-btn">最后一頁</div>
 <div class="DiReactPage-btn">總4頁</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳轉(zhuǎn)</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//點擊第一頁 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

效果測試：

2.第一頁和最后一頁處理

這個很簡單，只是傳遞page參數(shù)，我們已經(jīng)獲取總頁數(shù)，直接設(shè)置即可！

這個對比第一頁需要加入特殊的處理，當(dāng)前是第一頁，這個按鈕就不可用狀態(tài)，下一頁一樣的邏輯判斷當(dāng)前是不是在最后一頁：

調(diào)用位置加入事件，在加一個是否可用的類名：

全部代碼：

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
 <div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一頁</div>
 <div class="DiReactPage-btn" v-on:click="clickLast">最后一頁</div>
 <div class="DiReactPage-btn">總4頁</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳轉(zhuǎn)</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//點擊第一頁 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 },
 clickLast:function(){//點擊最后一頁
 this.$emit("getajaxlist",this.allpage);
 },
 clickPrev:function(){//點擊上一頁
 if(this.currentpage-1<1){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage-1);
 },
 clickNext:function(){//點擊下一頁
 if(this.currentpage+1>this.allpage){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage+1);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

效果測試：

4.跳頁處理

這個我們獲取輸入框的值，直接調(diào)用，不過對輸入的內(nèi)容必須有一些判斷限制：

加一個data:

使用位置：

5.顯示總頁數(shù)

這個是最簡單的：

六.分頁全部代碼和測試

divuePage.vue:

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
 <div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一頁</div>
 <div class="DiReactPage-btn" v-on:click="clickLast">最后一頁</div>
 <div class="DiReactPage-btn">總{{allpage}}頁</div>
 <input class="DiReactPage-input" type="text" v-model="skipvalue" />
 <button class="DiReactPage-btn" v-on:click="clickSkip">跳轉(zhuǎn)</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 data:function(){
 return {
 skipvalue:""
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//點擊第一頁 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 },
 clickLast:function(){//點擊最后一頁
 this.$emit("getajaxlist",this.allpage);
 },
 clickPrev:function(){//點擊上一頁
 if(this.currentpage-1<1){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage-1);
 },
 clickNext:function(){//點擊下一頁
 if(this.currentpage+1>this.allpage){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage+1);
 },
 clickSkip:function(){//點擊下一頁
 if(isNaN(this.skipvalue)){
 console.log("必須是數(shù)字")
 return false;
 }
 if(this.skipvalue<1 || this.skipvalue>this.allpage){
 console.log("超過范圍")
 return false;
 }
 this.$emit("getajaxlist",this.skipvalue);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

我們現(xiàn)在在pageHome.vue做了使用，這個模擬數(shù)據(jù)包含7頁，我們在另外兩個組件也使用分頁組件，測試小于5頁和只有1頁的效果：

<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>

直接粘貼就可以在另外的組件使用。

只有1頁：

小于5頁：

測試沒有太大問題！

七.優(yōu)化和改進(jìn)建議

當(dāng)然不是樣式的優(yōu)化，這個需要設(shè)計的參與，我們還是顯示的優(yōu)化和改進(jìn)，比如：

我們是不是該有一個...

還有就是...

可以參考別的分頁效果，然后你可以不斷的改進(jìn)！

八.完整代碼

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注冊組件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （縮寫）相當(dāng)于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:

<template>
 <div id="app">
 <h3>{{msg}}</h3>
 <ul>
 <li><router-link to="/">pageHome</router-link></li>
 <li><router-link to="/pageNews">pageNews</router-link></li>
 <li><router-link to="/pageInfo">pageInfo</router-link></li>
 </ul>
 <div>
 <router-view></router-view>
 </div>
 </div>
</template>
 
<script>
export default {
 name: 'app',
 data () {
 return {
 msg: '分頁組件：DiVuePage '
 }
 }
}
</script>
 
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

divuePage.vue:

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一頁</div>
 <div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一頁</div>
 <div class="DiReactPage-btn" v-on:click="clickLast">最后一頁</div>
 <div class="DiReactPage-btn">總{{allpage}}頁</div>
 <input class="DiReactPage-input" type="text" v-model="skipvalue" />
 <button class="DiReactPage-btn" v-on:click="clickSkip">跳轉(zhuǎn)</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 data:function(){
 return {
 skipvalue:""
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//點擊第一頁 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 },
 clickLast:function(){//點擊最后一頁
 this.$emit("getajaxlist",this.allpage);
 },
 clickPrev:function(){//點擊上一頁
 if(this.currentpage-1<1){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage-1);
 },
 clickNext:function(){//點擊下一頁
 if(this.currentpage+1>this.allpage){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage+1);
 },
 clickSkip:function(){//點擊下一頁
 if(isNaN(this.skipvalue)){
 console.log("必須是數(shù)字")
 return false;
 }
 if(this.skipvalue<1 || this.skipvalue>this.allpage){
 console.log("超過范圍")
 return false;
 }
 this.$emit("getajaxlist",this.skipvalue);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

pageHome.vue:

<template>
 <div class="page">
 <p>//模擬ajax數(shù)據(jù) 1-7頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1-7頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageInfo.vue:

<template>
 <div class="page">
 <p>//模擬ajax數(shù)據(jù) 1-3頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageInfo',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1-3頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=3
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=3
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=3
 nextpage=false; 
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageNews.vue:

<template>
 <div class="page">
 <p>模擬ajax數(shù)據(jù) 1頁</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageNews',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模擬ajax數(shù)據(jù) 1頁
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"}
 ]
 allpage=1
 nextpage=false;
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模擬生成第一頁數(shù)據(jù)
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

總結(jié)

以上所述是小編給大家介紹的Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: