文章目录
- 1 分页功能实现
- 2 分页器的展示需要哪些数据（条件）？
- 3 自定义分页器
- 4 分页器存在问题
- 5 分页器动态展示
- 6 开发某一个商品的详情页面
1 分页功能实现
- 为什么很多项目采用分页功能，比如电商平台同时展示的数据有很多（1万+），采用分页功能。
- ElementUI是有相应的分页组件，使用起来超级简单，但是咱们前台项目目前不用【掌握自定义分页功能】。
2 分页器的展示需要哪些数据（条件）？
- 需要知道当前是第几个：pageNo字段代表当前页数。
- 需要知道每一个需要展示多少条数据：pageSize字段代表。
- 需要知道整个分页器一共有多少条数据：total字段进行代表【获取另外一种信息】。
- 需要知道分页器连续页面个数：5|7【奇数】，因为奇数对称（好看）。
-
总结：对于分页器而言，自定义的前提是需要知道四个前提条件：
- pageNo：当前第几个。
- pageSize：每一页展示多少条数据。
- total：整个分页一共要展示多少条数据。
- continues：分页连续的页码个数。
-
举例子：每一页3条数据，一共90条数据【一共是30页】。
-
举例子：每一页3条数据，一共91条数据【一共是31页】。
3 自定义分页器
- 在开发的时候先传递自己假的数据进行调试，调试成功以后再用服务器数据。
4 分页器存在问题
-
对于分页器而言，很重要的一个地方即为【算出：连续页面起始数字和结束数字】：pageNo - 2, pageNo, pageNo + 2。
-
当前是第8页（当前页永远在中间）
6 7 8 9 10
当前是第15页
13 14 15 16 17
当前是第20页
18 19 20 21 22
当前是第8页，连续页码5页
6 7 8 9 10
当前是第8页，连续页码7页
5 6 7 8 9 10 11 -
前提：分页器数字没有0，也没有负数
-
当前页第1页
1 2 3 4 5 【-1 0 1 2 3（错误）】
当前页第2页
1 2 3 4 5 【0 1 2 3 4（错误）】
当前页第31页
27 28 29 30 31 【29 30 31 32 33（错误）】
当前页第30页
27 28 29 30 31 【28 29 30 31 32（错误）】
5 分页器动态展示
- 分页器动态展示：分为上中下【中间部分】。
- v-for：数组|数字|字符串|对象。
6 开发某一个商品的详情页面
- 静态组件（详情页的组件：还没有注册为路由组件）。
- 当点击商品图片的时候，跳转到详情页面，在路由跳转的时候需要带上产品的ID给详情页面。
- 滚动行为。
- API：请求接口。
- vuex：获取产品详情信息。
- vuex还需要再新增一个模块detail。
- 需要回到大仓库中进行合并。