首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue.js分页组件实现：diVuePagination的使用详解

Posted in Javascript onJanuary 10, 2018

一.介绍

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二.创建初始化项目

这里不在详细说明，我们的分页演示只需要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=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(){
 //模拟生成第一页数据
 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=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(){
 //模拟生成第一页数据
 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=1
 nextpage=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>

预览效果：

Vue.js分页组件实现：diVuePagination的使用详解

三.分页静态结构和样式

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=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(){
 //模拟生成第一页数据
 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>

效果预览：

Vue.js分页组件实现：diVuePagination的使用详解

四.分页组件实现逻辑分析

我们分析一下如何实现我们的分页组件：

从分页组件考虑：

分页组件需要显示页数，那么就需要传递给分页组件总用多少页这个状态，

上一页和下一页存在不可用状态，在第一页上一页不可用，所以要把当前所在页数传递，同样页数的焦点位置也需要它判断，

然后就是方法，我们页数和按钮的点击都是发起请求，携带的参数就是当前点击的页数，

1.总页数，当前所在页，可在父组件传递进入

2.发起请求的方法可以通过组件交互通信实现

1的数据都是接口会返回给我们的，我们直接以属性传递即可：

Vue.js分页组件实现：diVuePagination的使用详解

2的实现也很简单，我们其实已经处理模拟使用过了：

Vue.js分页组件实现：diVuePagination的使用详解

我们只需要自定义事件，让分页组件$emit即可：

Vue.js分页组件实现：diVuePagination的使用详解

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=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(){
 //模拟生成第一页数据
 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即可：

Vue.js分页组件实现：diVuePagination的使用详解

显示：

Vue.js分页组件实现：diVuePagination的使用详解

这样还不够健壮，还有一个就是总页数5做分界线，大于5就显示当前到后4个，

比如在第3页，显示：3 4 5 6 7

第2页，显示：2 3 4 5 6

好了我们加入一些小的逻辑判断：

Vue.js分页组件实现：diVuePagination的使用详解

我们要给当前页加一个类名标识，已经获取当前的页数了，我们加一个判断就可以了，在v-for中：

Vue.js分页组件实现：diVuePagination的使用详解

我们在加入点击事件，拿到点击的item就是要请求后台数据的参数page:

Vue.js分页组件实现：diVuePagination的使用详解

定义这个方法：

Vue.js分页组件实现：diVuePagination的使用详解

完整代码：

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

效果测试：

Vue.js分页组件实现：diVuePagination的使用详解

2.第一页和最后一页处理

这个很简单，只是传递page参数，我们已经获取总页数，直接设置即可！

Vue.js分页组件实现：diVuePagination的使用详解

Vue.js分页组件实现：diVuePagination的使用详解

3.上一页和下一页处理

这个对比第一页需要加入特殊的处理，当前是第一页，这个按钮就不可用状态，下一页一样的逻辑判断当前是不是在最后一页：

Vue.js分页组件实现：diVuePagination的使用详解

调用位置加入事件，在加一个是否可用的类名：

Vue.js分页组件实现：diVuePagination的使用详解

全部代码：

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

效果测试：

Vue.js分页组件实现：diVuePagination的使用详解

4.跳页处理

这个我们获取输入框的值，直接调用，不过对输入的内容必须有一些判断限制：

Vue.js分页组件实现：diVuePagination的使用详解

加一个data:

Vue.js分页组件实现：diVuePagination的使用详解

使用位置：

Vue.js分页组件实现：diVuePagination的使用详解

5.显示总页数

这个是最简单的：

Vue.js分页组件实现：diVuePagination的使用详解

六.分页全部代码和测试

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

Vue.js分页组件实现：diVuePagination的使用详解

小于5页：

Vue.js分页组件实现：diVuePagination的使用详解

测试没有太大问题！

七.优化和改进建议

当然不是样式的优化，这个需要设计的参与，我们还是显示的优化和改进，比如：

Vue.js分页组件实现：diVuePagination的使用详解

我们是不是该有一个...

还有就是...

可以参考别的分页效果，然后你可以不断的改进！

八.完整代码

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=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(){
 //模拟生成第一页数据
 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=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(){
 //模拟生成第一页数据
 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=1
 nextpage=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>

总结

以上所述是小编给大家介绍的Vue.js分页组件实现：diVuePagination的使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Vue.js分页组件实现：diVuePagination的使用详解

- Author -

透笔度_tbd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 #Javascript
微信小程序实现图片上传功能实例（前端+PHP后端）
Jan 10 #Javascript
微信小程序实现传参数的几种方法示例
Jan 10 #Javascript
React中常见的动画实现的几种方式
Jan 10 #Javascript
使用async-validator编写Form组件的方法
Jan 10 #Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 #Javascript
JavaScript实现快速排序的方法分析
Jan 10 #Javascript
策略(1) offset(1) 缓存(3) 锁(1) 内存(1) 性能优化(3) 事务(5) limit(1) 逻辑架构(1) mysql.user(1)
You might like
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
原生js实现随机点餐效果
2019/12/10 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
用python代码做configure文件
2014/07/20 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
英国一家专门出售品牌鞋子的网站：Allsole
2016/08/07 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
闪闪红星观后感
2015/06/08 职场文书
重阳节简报
2015/07/20 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python