自定义封装分页器组件之前需要知道的数据:
1.当前的页码
2.总共多少条数据
3.每页展示多少条数据
4.连续页码数(5|7)
5.总页数
计算连续页码数的起始值和结束值
//通过计算属性来计算出来
computed:{
startNumAndEndNum(){
//首先先结构出我们需要的值(当前页码值,总页数,连续页码数),这个值可以让父组件通过props进行传递
let {pageNo,totalPage,continues} = this
//给起始值和结束值赋初始变量
let start = 0,end = 0;
//判断当前总页数是否小于连续页码数
if(totalPage<continues){
start=1;end=totalPage;
} else{
//如果总页数大于连续页码数
start = pageNo - parseInt(continues/2);
end = pageNo + parseInt(continues/2);
//还要判断起始值是否小于1
if(start<1){
start = 1;
end = continues;
}
//判断结束值是否大于总页数
if(end>totalPage){
end = totalPage;
start = totalPage - continues +1
}
}
return {start,end}
}
}
剩下我们就可以遍历结束值,让遍历出来的值大于等于起始值显示,否则隐藏,这样连续页码数的值就有了,再根据其他接收到的值进行渲染页面就可以了
发送请求切换页面?
通过绑定自定义事件,通过传入当前的页码数发送请求,点击上一页,传入当前的页码数-1,点击下一页,传入当前的页码数+1,点击最后一页直接传入总页数
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)