Vue电商项目--分页器制作
因为我们点击第一页的上一页是没有效果的。ElementUI有相应的分页组件，使用起来超级简单，但是我们不使用【掌握自定义分页功能】1.为什么很多项目采用分页功能，比如电商平台同时展示的数据有很多（1万+），采用分页功能。自定义分页器，在开发的时候先自己传递假的数据进行测试，调试成功以后在用服务器数据。来到分页器组件，动态拿到数据，通过计算属性，向下取整拿出数据渲染到页面上。但是我们这样的数据是写死
分页器静态组件
分页这个组件，不单单是一个页面用到了。多个页面同时用它,因此我们可以封装成一个全局组件
需要将这个分页结构拆分到components
通用的分页组件Pagination
<template>
<div class="pagination">
<button>1</button>
<button>上一页</button>
<button>···</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>···</button>
<button>9</button>
<button>上一页</button>
<button style="margin-left: 30px">共 60 条</button>
</div>
</template>
<script>
export default {
name: "Pagination",
}
</script>
<style lang="less" scoped>
.pagination {
button {
margin: 0 5px;
background-color: #f4f4f5;
color: #606266;
outline: none;
border-radius: 2px;
padding: 0 4px;
vertical-align: top;
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
border: 0;
&[disabled] {
color: #c0c4cc;
cursor: not-allowed;
}
&.active {
cursor: not-allowed;
background-color: #409eff;
color: #fff;
}
}
}
</style>
然后全局的注册这个组件
有点小问题，改一下。让它上一页在1前面，和居中
排序复习
changeOrder(flag){
let originOrder=this.searchParams.order;
let originFlag=this.searchParams.order.split(":")[0]
let originSort=this.searchParams.order.split(":")[1]
// 准备一个新的order属性值
let newOrder=''
// 点击的是综合
if(flag==originFlag){
newOrder=`${originFlag}:${originSort=='desc'?"asc":"desc"}`
}else{
// 点击的是价格
newOrder=`${flag}:${'desc'}`
}
console.log(newOrder);
// 将新的order赋予searchParams
this.searchParams.order=newOrder
this.getData()
}这里要注意的一点就是这个newOrder是会不断的变化
而这个触发else，就是点击另一个才会触发降序
分页功能分析
1.为什么很多项目采用分页功能，比如电商平台同时展示的数据有很多（1万+），采用分页功能
ElementUI有相应的分页组件，使用起来超级简单，但是我们不使用【掌握自定义分页功能】
2.分页展示，需要那些数据（条件）？
需要知道当前是第几个：pageNo字段代表当前页码
需要知道每一个需要展示多少条数据：pageSize字段进行代表
需要知道整个分页器一共有多少条数据：total字段进行代表--【获取另外一条信息：一共多少页】
需要知道分页器连续页码的个数：5|7【奇数】，以为奇数对称（好看）
总结：对于分页器而言，自定义前提需要知道四个前提条件
pageNo:当前第几个
pageSize:代表每一页展示多少条数据
total:代表整个分页一共要展示多少条数据
continues:代表分页连续页码个数
举例：每一页3条数据 一共91条数据 【一共需要31页】
分页器起始与结束数字计算
自定义分页器，在开发的时候先自己传递假的数据进行测试，调试成功以后在用服务器数据
这里的数据是假的，将来用来替代的
来到分页器组件，动态拿到数据，通过计算属性，向下取整拿出数据渲染到页面上
对于分页器而言，很重要的一个地方即为【算出：连续页面起始数字和结束数字】
当前页面第8页
6 7 8 9 10
当前页面第20页
18 19 20 21 22
这个不正常的数字就是1 2 3 4
正确情况 （这个页码不能写死）
比如当前的是第8页，连续页码5
6 7 8 9 10
比如当前页面是8页 连续页码7
5 6 7 8 9 10 11
但是有bug，当前页如果为1，那么就有可能为负数
假如：当前是1页
1 2 3 4 5 而不是
假如：当前是第2页
1 2 3 4 5
startNumAndEndNum(){
const {continues,pageNo,totalPage}=this
// 先定义俩个变量存储起始数字与结束数字
let start=0,end=0
// 不正常的现象【总页数没有连续页码多】
if(this.continues>totalPage){
start=1;
end=this.totalPage
}else{
// 正常现象 连续页码为5，但总页码一定大于5
// 起始数字
start=pageNo-parseInt(continues/2)
// 结束数字
end=pageNo+parseInt(continues/2)
// 不正常的数字【start数字出现0|负数】纠正
if(start<1){
start=1
end=continues
}
// 把出现不正常的现象【end大于总页码】矫正
if(end>totalPage){
end=totalPage
start=totalPage-continues+1
}
}
}分页器动态展示
分页器动态展示？分为上中下【中间部分】
我们先测试一下
这样写是没有问题的，但是如果我们传入的是第一页，又会发生错误
完整代码是这样的，逻辑就是按照我们上次分析的
<template>
<div class="pagination">
<h1>{{ startAndEnd }}</h1>
<button @click="$emit('currentPage',pageNo - 1)" :disabled="pageNo==1">上一页</button>
<button v-if="startAndEnd.start > 1" @click="$emit('currentPage',1)">1</button>
<button v-if="startAndEnd.start > 2">.....</button>
<!-- 中间连续页码的地方:v-for、数组、对象、数字、字符串 -->
<button v-for="page in startAndEnd.end" :key="page" v-if="page >= startAndEnd.start" @click="$emit('currentPage',page)" :class="{active:pageNo==page}">{{ page }}</button>
<button v-if="startAndEnd.end < totalPage - 1 ">......</button>
<button v-if="startAndEnd.end < totalPage" @click="$emit('currentPage',totalPage)">{{ totalPage }}</button>
<button @click="$emit('currentPage',pageNo + 1)" :disabled="pageNo==totalPage">下一页</button>
<button style="margin-left: 30px">共 {{ total }} 条</button>
</div>
</template>
<script>
export default {
name: "Pagination",
props: ["total", "pageSize", "pageNo", "pagerCount"],
computed: {
//分页器一共多少页【总条数/每页展示条数】
totalPage() {
//向上取整数
return Math.ceil(this.total / this.pageSize);
},
//底下的代码是整个分页器最重要的地方[算出连续五个数字、开头、结尾]
startAndEnd() {
//算出连续页码:开始与结束这两个数字
let start = 0,
end = 0;
const { totalPage, pagerCount, pageNo } = this;
//特殊情况:总共页数小于连续页码数
if (totalPage < pagerCount) {
start = 1;
end = totalPage;
} else {
//正常情况：分页器总页数大于连续页码数
start = pageNo - parseInt(pagerCount / 2);
end = pageNo + parseInt(pagerCount / 2);
//约束start|end在合理范围之内
//约束头部
if (start < 1) {
start = 1;
end = pagerCount;
}
//约束尾部
if (end > totalPage) {
end = totalPage;
start = totalPage - pagerCount + 1;
}
}
return { start, end };
},
},
};
</script>
<style lang="less" scoped>
.pagination {
button {
margin: 0 5px;
background-color: #f4f4f5;
color: #606266;
outline: none;
border-radius: 2px;
padding: 0 4px;
vertical-align: top;
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
border: 0;
&[disabled] {
color: #c0c4cc;
cursor: not-allowed;
}
&.active {
cursor: not-allowed;
background-color: #409eff;
color: #fff;
}
}
}
</style>
分页器完成
但是我们这样的数据是写死的，我们需要从服务器中拿数据，然后传进去
这里的数据我们需要从state上来拿回数据。
现在我们思考一个问题，那就是我们点击下一页，要从服务器捞数据。因此子传父，用自定义事件
父组件自定义好了事件，让子组件绑定事件
:disabled="pageNo==1"这么写的原因是我们要考虑第一页和最后一页。因为我们点击第一页的上一页是没有效果的 。同时我们要把自己的页码值发送给父组件
然后在整理数据
getPageNo(pageNo){
this.searchParams.pageNo=pageNo
this.getData()
}分页器添加类名
就是点击谁就给谁类名
&.active {
cursor: not-allowed;
background-color: #409eff;
color: #fff;
}
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献6条内容
所有评论(0)