Vue.js分页组件实现：diVuePagination
生活随笔
收集整理的這篇文章主要介紹了
Vue.js分页组件实现：diVuePagination
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么80%的碼農都做不了架構師？>>> ??
完整版下載地址：https://gitee.com/dgx/diVuePagination
完整版演示地址：http://dgx.gitee.io/divuepagination/#/
?
一.準備工總
利用vue-cli和webpack如何快速搭建一個項目我們已經有過介紹：
為vue開發準備的一份es6語法筆記? https://my.oschina.net/tbd/blog/1541903
Vue.js構建項目筆記1:vue-cli? https://my.oschina.net/tbd/blog/1552953
Vue.js構建項目筆記2:vuejs+vue-router? https://my.oschina.net/tbd/blog/1553267
Vue.js構建項目筆記3:vuejs+vue-router +vuex? https://my.oschina.net/tbd/blog/1553518
至于vue的語法學習，官網讓你最快速掌握：https://cn.vuejs.org/v2/guide/
?
二.創建初始化項目
這里不在詳細說明，我們的分頁演示只需要vue和vue-router就可以了，我們直接構建項目和設置配置。
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 // （縮寫）相當于 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數據 1-7頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=true; }else if(currentpage==7){list=[{id:1,text:"3131"},{id:2,text:"3232"}]allpage=7nextpage=false; };that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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數據 1-3頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 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=3nextpage=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=3nextpage=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=3nextpage=false; }that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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數據 1頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 1頁setTimeout(function(){ if(currentpage==1){list=[{id:1,text:"111111"},{id:2,text:"222222"},{id:3,text:"3333333333"}]allpage=1nextpage=false;}that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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:
<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">跳轉</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 // （縮寫）相當于 routes: routes})new Vue({el: '#app',router,render: h => h(App) })pageHome.vue引用：
<template><div class="page"><p>//模擬ajax數據 1-7頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=true; }else if(currentpage==7){list=[{id:1,text:"3131"},{id:2,text:"3232"}]allpage=7nextpage=false; };that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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>效果預覽：
?
四.分頁組件實現邏輯分析
我們分析一下如何實現我們的分頁組件：
從分頁組件考慮：
分頁組件需要顯示頁數，那么就需要傳遞給分頁組件總用多少頁這個狀態，
上一頁和下一頁存在不可用狀態，在第一頁上一頁不可用，所以要把當前所在頁數傳遞，同樣頁數的焦點位置也需要它判斷，
然后就是方法，我們頁數和按鈕的點擊都是發起請求，攜帶的參數就是當前點擊的頁數，
1.總頁數，當前所在頁，可在父組件傳遞進入
2.發起請求的方法可以通過組件交互通信實現
1的數據都是接口會返回給我們的，我們直接以屬性傳遞即可：
2的實現也很簡單，我們其實已經處理模擬使用過了：
我們只需要自定義事件，讓分頁組件$emit即可：
pageHome.vue:
<template><div class="page"><p>//模擬ajax數據 1-7頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=true; }else if(currentpage==7){list=[{id:1,text:"3131"},{id:2,text:"3232"}]allpage=7nextpage=false; };that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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我們接受了這些傳遞的內容，總頁數和當前所在頁，然后點擊第一頁觸發自定義事件，傳遞給父組件一個1，獲取第一頁數據：
<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">跳轉</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.頁數顯示
我們的首要工作就是把頁數顯示出來，我們已經接收了總頁數，其實這個問題很容易解決，我們設置一個計算屬性，屬性依據總頁數生成一個數組，從1到n即可：
顯示：
這樣還不夠健壯，還有一個就是總頁數5做分界線，大于5就顯示當前到后4個，
比如在第3頁，顯示：3 4 5 6 7
第2頁，顯示：2 3 4 5 6
好了我們加入一些小的邏輯判斷：
我們要給當前頁加一個類名標識，已經獲取當前的頁數了，我們加一個判斷就可以了，在v-for中：
我們在加入點擊事件，拿到點擊的item就是要請求后臺數據的參數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">跳轉</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參數，我們已經獲取總頁數，直接設置即可！
3.上一頁和下一頁處理
這個對比第一頁需要加入特殊的處理，當前是第一頁，這個按鈕就不可用狀態，下一頁一樣的邏輯判斷當前是不是在最后一頁：
調用位置加入事件，在加一個是否可用的類名：
全部代碼：
<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">跳轉</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.跳頁處理
這個我們獲取輸入框的值，直接調用，不過對輸入的內容必須有一些判斷限制：
加一個data:
使用位置：
5.顯示總頁數
這個是最簡單的：
?
六.分頁全部代碼和測試
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">跳轉</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("必須是數字")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做了使用，這個模擬數據包含7頁，我們在另外兩個組件也使用分頁組件，測試小于5頁和只有1頁的效果：
<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>直接粘貼就可以在另外的組件使用。
只有1頁：
小于5頁：
測試沒有太大問題！
?
七.優化和改進建議
當然不是樣式的優化，這個需要設計的參與，我們還是顯示的優化和改進，比如：
我們是不是該有一個...
還有就是...
可以參考別的分頁效果，然后你可以不斷的改進！
?
八.完整代碼
?
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 // （縮寫）相當于 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">跳轉</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("必須是數字")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數據 1-7頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=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=7nextpage=true; }else if(currentpage==7){list=[{id:1,text:"3131"},{id:2,text:"3232"}]allpage=7nextpage=false; };that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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數據 1-3頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 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=3nextpage=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=3nextpage=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=3nextpage=false; }that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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數據 1頁</p><ul class="ull"><li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內容：{{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數據 1頁setTimeout(function(){ if(currentpage==1){list=[{id:1,text:"111111"},{id:2,text:"222222"},{id:3,text:"3333333333"}]allpage=1nextpage=false;}that.currentpage=currentpage;that.list=list;that.allpage=allpage;that.nextpage=nextpage;},200); }},created:function(){//模擬生成第一頁數據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>?
轉載于:https://my.oschina.net/tbd/blog/1553986
總結
以上是生活随笔為你收集整理的Vue.js分页组件实现：diVuePagination的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring boot框架学习学前掌握之
- 下一篇： vue实例以及生命周期