vue尚品汇商城项目-day04【27.分页器静态组件(难点)】

简介: vue尚品汇商城项目-day04【27.分页器静态组件(难点)】

1.jpeg

@[toc]

27.分页器静态组件(难点)

难点:

  • 考虑点1:为啥需要分页呢?

    答案:按需加载

  • 考虑点2:分页器展示,需要哪些数据(条件)?

​ 答案:需要知道4个参数:pageNo、pageSize、total、continues

  • 考虑点3:为啥continues大多都是奇数个数?

    答案:因为对称且好看。

  • 考虑点4:为啥不直接使用ElementUI啥的第三方组件呢?

    答案:咱自己要掌握自定义分页功能,因为万一产品经理想要自定义分页规则呢。

  • 考虑点5:如何设计分页器原理?(最难点)

    • 知道当前第几页:pageNo
    • 知道分页器一共需要展示多少条数据:total
    • 知道每一页需要展示数据个数:pageSize
    • 知道连续的页码数,比如连续页面为: 5 6 7 8 9
    • 知道可能发生错误的地方:比如当总页数没有连续页码多时如何处理;再比如连续页码比总页数多算正常现象情况下,但是pageNo为【1|2】的时候,那么start就会出现【0|负数】,或者pageNo为【totalPage | totalPage-1】的时候,那么就会出现end > totalPage。这又该如何处理。
    • 知道"..."不加点击事件。
    • 知道【第二页...、倒数第二页...】需要加v-if判断,控制显隐。
  • 考虑点6:分页组件要注册成为全局组件,因为好多地方会使用它

修改代码:

src/main.js

//全局注册分页组件
import Pagination from '@/components/Pagination'
Vue.component(Pagination.name, Pagination)
AI 代码解读

src/components/Pagination/index.vue

<template>
  <div class="pagination">
    <!-- 上 -->
    <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">上一页</button>
    <button v-if="startNumAndEndNum.start > 1" :class="{ active: pageNo == 1 }" @click="$emit('getPageNo', 1)">1</button>
    <button v-if="startNumAndEndNum.start > 2">···</button>
    <!-- 中间部分,注意:v-for遍历数字索引从1开始,由于添加规则page >= startNumAndEndNum.start,所以最终显示的只有continues个数字 -->
    <button v-for="(page, index) in startNumAndEndNum.end" v-if="page >= startNumAndEndNum.start" :key="index" :class="{ active: pageNo == page }" @click="$emit('getPageNo', page)"
    >{
  { page }}</button>

    <!-- 下 -->
    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
    <button v-if="startNumAndEndNum.end < totalPage" :class="{active:pageNo==totalPage}" @click="$emit('getPageNo', totalPage)"
    >{
  { totalPage }}</button>
    <button :disabled="pageNo == totalPage" @click="$emit('getPageNo', pageNo + 1)">下一页</button>

    <button style="margin-left: 30px">共 {
  { total }} 条</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    //总共多少页
    totalPage() {
      //向上取证
      return Math.ceil(this.total / this.pageSize);
    },
    //计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
    startNumAndEndNum() {
      //解构出来,不解构是作为实例身上的属性,不解构没法用,所谓解构:就是要将对象分解为多个属性,这个对象可以是this对象也可以是普通的对象
      const {continues, pageNo, totalPage} = this;
      //先定义两个变量存储起始数字与结束数字
      let start = 0, end = 0;
      //连续页码数字5【就是至少五页】,如果出现不正常的现象【就是不够五页】
      //不正常现象【总页数没有连续页码多】
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        //正常现象【连续页码5,但是你的总页数一定是大于等于5的】
        //起始数字,注意:parseInt()方法是向下取整
        start = pageNo - parseInt(continues / 2);
        //结束数字
        end = pageNo + parseInt(continues / 2);
        //把出现不正常的现象【start数字出现0|负数】纠正,假设pageNo为【1|2】的时候,那么start就会出现【0|负数】
        if (start < 1) {
          start = 1;
          end = continues;
        }
        //把出现不正常的现象[end数字大于总页码]纠正,假设pageNo为【totalPage | totalPage-1】的时候,那么就会出现end > totalPage
        if (end > totalPage) {
          end = totalPage;
          start = totalPage - continues + 1;
        }
      }
      return {start, end};
    },
  },
};
</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;
    }
  }
}

.active {
  background: skyblue;
}
</style>
AI 代码解读

src/pages/Search/index.vue

<!-- 分页器 -->
<Pagination
              :pageNo="searchParams.pageNo"
              :pageSize="searchParams.pageSize"
              :total="total"
              :continues="5"
              @getPageNo="getPageNo"
/>

import {mapGetters, mapState} from "vuex"

methods: {
    //自定义事件的回调函数---获取当前第几页
      getPageNo(pageNo) {
        //整理带给服务器参数
        this.searchParams.pageNo = pageNo;
        //再次发请求
        this.getData();
      }
}

computed:{
    //获取search模块展示产品一共多少数据
      ...mapState({
        total: (state) => state.search.searchList.total,
      }),
}
AI 代码解读

问题1:为啥需要分页呢?

答案:按需加载

问题2:分页器展示,需要哪些数据(条件)?

答案:自定义分页器前,需要知道4个参数:

  • pageNo:代表当前第几页
  • pageSize:代表每一页展示多少条数据
  • total:代表数据总条数
  • continues:代表分页连续页码个数

问题3:为啥continues大多都是奇数个数?

答案:因为对称且好看。比如淘宝的分页器,中间7-11是奇数个。

image.png

问题4:为啥不直接使用ElementUI啥的第三方组件呢?

答案:咱自己要掌握自定义分页功能,因为万一产品经理想要自定义分页规则呢。

问题5:如何设计分页逻辑?(最难点)

答案:考虑start和end的实现逻辑,以及vue模板中的判断逻辑。

computed: {
    //总共多少页
    totalPage() {
      //向上取证
      return Math.ceil(this.total / this.pageSize);
    },
    //计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
    startNumAndEndNum() {
      //解构出来,不解构是作为实例身上的属性,不解构没法用,所谓解构:就是要将对象分解为多个属性,这个对象可以是this对象也可以是普通的对象
      const {continues, pageNo, totalPage} = this;
      //先定义两个变量存储起始数字与结束数字
      let start = 0, end = 0;
      //连续页码数字5【就是至少五页】,如果出现不正常的现象【就是不够五页】
      //不正常现象【总页数没有连续页码多】
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        //正常现象【连续页码5,但是你的总页数一定是大于等于5的】
        //起始数字,注意:parseInt()方法是向下取整
        start = pageNo - parseInt(continues / 2);
        //结束数字
        end = pageNo + parseInt(continues / 2);
        //把出现不正常的现象【start数字出现0|负数】纠正,假设pageNo为【1|2】的时候,那么start就会出现【0|负数】
        if (start < 1) {
          start = 1;
          end = continues;
        }
        //把出现不正常的现象[end数字大于总页码]纠正,假设pageNo为【totalPage | totalPage-1】的时候,那么就会出现end > totalPage
        if (end > totalPage) {
          end = totalPage;
          start = totalPage - continues + 1;
        }
      }
      return {start, end};
    },
  },
AI 代码解读

注意点6:计算总共多少页,可以采用Math.ceil(this.total / this.pageSize)向上取整的方式。

注意点7:只有数字的页码才添加点击事件,针对页码为...的不添加点击事件,只会新增v-if判断。

<button v-if="startNumAndEndNum.start > 1" :class="{ active: pageNo == 1 }" @click="$emit('getPageNo', 1)">1</button>
<button v-if="startNumAndEndNum.start > 2">···</button>

<button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
<button v-if="startNumAndEndNum.end < totalPage" :class="{active:pageNo==totalPage}" @click="$emit('getPageNo', totalPage)"
AI 代码解读

注意点8:<button :disabled="pageNo == 1",其中disabled用来控制是否禁用,就是不可点击的意思。

注意点9:子组件传父组件通信,使用自定义事件,除了使用this.\$emit方式外,也可以在标签中采用@click="\$emit('getPageNo', 1)"方式。

注意点10::class="{ active: pageNo == 1 }"用来标识哪个分页按钮高亮。

注意点11:中间部分,注意:v-for遍历数字索引从1开始,由于添加规则page >= startNumAndEndNum.start,所以最终显示的只有continues个数字。

<button v-for="(page, index) in startNumAndEndNum.end" v-if="page >= startNumAndEndNum.start" :key="index" :class="{ active: pageNo == page }" @click="$emit('getPageNo', page)"
    >{
  { page }}</button>
AI 代码解读

注意点12:代码解构,不解构是作为实例身上的属性,不解构没法用,所谓解构:就是要将对象分解为多个属性,这个对象可以是this对象也可以是普通的对象。

const {continues, pageNo, totalPage} = this;
AI 代码解读

注意点13:方法是可以返回多个参数的,采用{}方式返回即可实现。

return {start, end};
AI 代码解读

本人其他相关文章链接

1.vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
2.vue尚品汇商城项目-day04【25.面包屑处理关键字】
3.vue尚品汇商城项目-day04【26.排序操作(难点)】
4.vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
5.vue尚品汇商城项目-day04【28.详情页面Detail】
6.vue尚品汇商城项目-day04【29.加入购物车操作(难点)】

目录
打赏
0
1
1
0
223
分享
相关文章
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
54 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
145 1
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
51 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
63 1
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
108 58

热门文章

最新文章