网站的大量图片存储格式,起名网站开发,广州网站建设案件,网站建设网站网站建设网站文章目录 1 分页功能实现2 分页器的展示需要哪些数据#xff08;条件#xff09;#xff1f;3 自定义分页器4 分页器存在问题5 分页器动态展示6 开发某一个商品的详情页面 1 分页功能实现
为什么很多项目采用分页功能#xff0c;比如电商平台同时展示的数据有很多#xf… 文章目录 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。需要回到大仓库中进行合并。
