Vue.js分页组件实现：diVuePagination的使用详解(4)
效果预览：
四.分页组件实现逻辑分析
我们分析一下如何实现我们的分页组件：
从分页组件考虑：
分页组件需要显示页数，那么就需要传递给分页组件总用多少页这个状态，
上一页和下一页存在不可用状态，在第一页上一页不可用，所以要把当前所在页数传递，同样页数的焦点位置也需要它判断，
然后就是方法，我们页数和按钮的点击都是发起请求，携带的参数就是当前点击的页数，
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=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>
内容版权声明：除非注明，否则皆为本站原创文章。