分页器

定义全局组件

分页器在很多地方都用的到，因此制定一个分页器的全局组件。名为Pagination。创建完成之后在该文件夹下创建index.vue文件设置name为Pagination。然后回到main.js中注册全局组件。最后回到Search中进行使用，具体步骤及代码如下所示。

页面效果如下所示

静态组件

将设置好的Pagination全局组件进行内容修改，依据文档给出的内容进行修改具体代码如下所示。

<template><div class="pagination"><button>上一页</button><button>1</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 {text-align: center;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.pageNo：当前第几个
2.pageSize：一页展示多少条数据
3.total：代表整个分页一共要展示多少数据
4.continues：代表分页连续页码个数
在使用分页器时，先别直接用后台数据，先用一些假数据调试一下分页器。

在分页器组件上，根据获得的数据动态计算一共有多少页数据，以及连续页面的开始页面号与结束页面号。

分页器动态展示

在上面已经计算出分页器的起始与结束数字。接下来动态渲染页面。具体代码如下所示。

当数据为pageNo=‘20’ 、pageSize=‘3’ 、total=‘91’ 、continues='5’时，页面效果如下所示。

完成分页器并给分页器添加类名。

上一步利用写死的数据已经完成动态展示分页器，接下来用服务器数据替换死数据。具体步骤如下
首先将已知的数据替换原来的死数据，然后获取分页器究竟点了哪个按钮，这里涉及到子给父传数据，因此给分页器组件绑定一个自定义事件getPageNo。绑定好之后去分页器子组件设定好逻辑将数据传递给父组件如下所示。

父组件接收数据并且动态调整当前页面，然后重新请求数据渲染页面。具体代码如下所示。

至此分页器功能完成。
接下来绑定样式

样式内容如下

最终效果如下所示

项目笔记19（尚品汇）相关推荐

电商项目尚品汇学习笔记
本文参考其他文章自己整理补充的,要阅读原文请查看:尚品汇项目笔记_爱哭的毛毛虫的博客-CSDN博客_尚品汇项目 1.vue文件目录 public文件夹:静态资源,webpack进行打包的时候会原封不动 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
尚品汇项目笔记（持续更新中）
项目网络教学视频链接:尚硅谷VUE项目实战,前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录一. 使用vue-cli脚手架去初始化项目二.项目的其他配置三.项目路由分析四.创建 ...
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
文章目录最好使用视频上的账号密码,13700000000 密:111111 最新服务端接口地址:http://gmall-h5-api.atguigu.cn 脚手架使用 1.创建项目 2.脚手架默认 ...
尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)
教学视频:https://www.bilibili.com/video/BV1Vf4y1T7bw 不回要资料的评论,资料在视频底下评论有些仓库里面有. 试图自行解决问题也是程序员必备技能之一,多做尝试 ...
尚硅谷尚品汇_后台管理项目
vueProject_尚品汇后台管理项目源码文章目录 vueProject_尚品汇后台管理 login/out模块 product模块 login/out模块 .env.development . ...
尚品汇后台管理项目（Vue）
简介 1:什么是后台管理系统项目? 注意:前端领域当中,开发后台管理系统项目,并非是java.php等后台语言项目. 在前面课程当中,我们已经开发了一个项目[尚品汇电商平台项目],这个项目主要针对的是 ...
vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
文章目录 49.(了解)自定义插件本人其他相关文章链接 49.(了解)自定义插件自定义插件好处: 功能:用于增强Vue 本质:包含install方法的一个对象,install的第一个参数是Vue, ...
vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】
文章目录本人其他相关文章链接项目介绍:此项目是基于vue2的前台电商项目和后台管理系统此项目为在线电商Web App (SPA) 包括首页, 搜索列表, 商品详情, 购物车, 订单, 支付, 用 ...
vue尚品汇商城项目-day04【29.加入购物车操作（难点）】
文章目录 29.加入购物车操作(难点) 29.1加入购物车按钮 29.2addCartSuce 29.3购物车 29.3.1 向服务器发送ajax请求,获取购物车数据 29.3.2UUID临时游客身份 ...

项目笔记19（尚品汇）

文章目录

分页器