目录
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
2.在components/Pagination/index.vue中
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
大家根据上传历史进行查找你需要的代码
分页器展示,需要哪些数据(条件)?
需要知道当前是第几页:pageNo字段代表当前页数
需要知道每一页需要展示多少条数据:pageSize字段表示
需要知道整个分页器一共有多少条数据:totel字段进行表示---[获取另外一条信息:一共多少页]
需要知道分页器连续页码的个数:5|7[奇数],因为奇数对称(好看)
总结:对于分页器而言,自定义前提需要知道四个前提条件
pageNo:当前第几页
pageSize:代表每一也展示多少条数据
total:代表整个分页一共要展示多少条数据
continues:代表分页连续页码个数
注意:自定义分页器,在开发的时候先自己传递假的数据进行调试,调试成功以后在用服务器数据
分析:
我们的分页器是全局组件,并且分页器目前是放到我们的Search组件(搜索页面中)的
分页器中的数据来源是父组件给子组件的,所以父子间通信,我们能想到最简单的方式是props
1.测试分页器阶段,这里数据将来需要替换的
在pages/Search/index.vue中
2.在components/Pagination/index.vue中
这里是分页器我们写得全局组件
我们利用props在分页器全局组件中接收到Search父组件传递过来的参数
3.总数据条数和总页数页面的显示
我们知道total是总页数,那么我们先把总页数利用插值语法替换结构中的数据
那么我也知道总total和pageSize我们就可以通过计算属性,算出总共多少页
所以总页数我们也就可以插值语法替换了
效果:
现在我们测试一下Search中分页器的假数据,就是我们改改数据看看页面的效果对不对
这里我把total91条数据改成100条我们再看看页面的效果
效果:没问题
4.算出:连续页面起始数字和结束数字
对于分页器而言,这是很重要的一步,能做出这一步分页器就成功了50%
业务逻辑是这样的,看下面两张图
continues:代表分页连续页码个数
如果当前页数是8,6是开始的数字,10是结束的数字
如果当前页数是9, 7是开始的数字,11是结束的数字
发现的规律就是,当前页始终在中间
所以我们还是利用计算属性来做这个业务
//pageNo:当前第几页 pageSize:代表每一也展示多少条数据 total:代表整个分页一共要展示多少条数据 continues:代表分页连续页码个数
//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
startNumAndEndNum(){
//解构出来,不解构是作为实例身上的属性,不解构没法用
const {continues,pageNo,totalPage} = this
//先定义两个变量存储起始数字与结束数字
let start = 0,end = 0
//连续页码数字5[就是至少5页],如果出现不正常的现象[就是不够5页]
//不正常现象[总页数没有连续页码多]
if(continues > totalPage){
start = 1;
end = totalPage;
}else{
//正常现象[连续页码5,但是你的总页数一定是大于5的]
//起始数字
start = pageNo - parseInt(continues / 2) //parseInt向下取整,这里代码主要是找规律,不能写死了
//结束数字
end = pageNo + parseInt(continues / 2)
//把出现不正常的现象纠正[start数字出现0|负数]
if(start < 1){
start = 1;
end = continues;
}
//把出现不正常的现象纠正[当前页如果和总页数相等,就会导致end大于总页数的问题]
if(end > totalPage) {
end = totalPage
start = totalPage - continues + 1
}
}
}修复bug的例子
