Vue电商项目--分页器制作

这篇具有很好参考价值的文章主要介绍了Vue电商项目--分页器制作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

分页器静态组件

分页这个组件,不单单是一个页面用到了。多个页面同时用它,因此我们可以封装成一个全局组件

Vue电商项目--分页器制作需要将这个分页结构拆分到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>

Vue电商项目--分页器制作Vue电商项目--分页器制作 然后全局的注册这个组件

 有点小问题,改一下。让它上一页在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是会不断的变化

Vue电商项目--分页器制作 而这个触发else,就是点击另一个才会触发降序 

分页功能分析

1.为什么很多项目采用分页功能,比如电商平台同时展示的数据有很多(1万+),采用分页功能

ElementUI有相应的分页组件,使用起来超级简单,但是我们不使用【掌握自定义分页功能】

2.分页展示,需要那些数据(条件)?

需要知道当前是第几个:pageNo字段代表当前页码

需要知道每一个需要展示多少条数据:pageSize字段进行代表

需要知道整个分页器一共有多少条数据:total字段进行代表--【获取另外一条信息:一共多少页】

需要知道分页器连续页码的个数:5|7【奇数】,以为奇数对称(好看)

Vue电商项目--分页器制作

 总结:对于分页器而言,自定义前提需要知道四个前提条件

pageNo:当前第几个

pageSize:代表每一页展示多少条数据

total:代表整个分页一共要展示多少条数据

continues:代表分页连续页码个数

举例:每一页3条数据 一共91条数据 【一共需要31页】

分页器起始与结束数字计算 

自定义分页器,在开发的时候先自己传递假的数据进行测试,调试成功以后在用服务器数据

Vue电商项目--分页器制作这里的数据是假的,将来用来替代的 

Vue电商项目--分页器制作来到分页器组件,动态拿到数据,通过计算属性,向下取整拿出数据渲染到页面上

对于分页器而言,很重要的一个地方即为【算出:连续页面起始数字和结束数字】

当前页面第8页

6 7 8 9 10

当前页面第20页

18 19 20 21 22

Vue电商项目--分页器制作这个不正常的数字就是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
            }
          }
        }

分页器动态展示

分页器动态展示?分为上中下【中间部分】

Vue电商项目--分页器制作 我们先测试一下

Vue电商项目--分页器制作这样写是没有问题的,但是如果我们传入的是第一页,又会发生错误

Vue电商项目--分页器制作 完整代码是这样的,逻辑就是按照我们上次分析的

<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>

Vue电商项目--分页器制作

分页器完成

但是我们这样的数据是写死的,我们需要从服务器中拿数据,然后传进去

Vue电商项目--分页器制作

Vue电商项目--分页器制作 Vue电商项目--分页器制作这里的数据我们需要从state上来拿回数据。

现在我们思考一个问题,那就是我们点击下一页,要从服务器捞数据。因此子传父,用自定义事件

Vue电商项目--分页器制作

  父组件自定义好了事件,让子组件绑定事件 

Vue电商项目--分页器制作:disabled="pageNo==1"这么写的原因是我们要考虑第一页和最后一页。因为我们点击第一页的上一页是没有效果的 。同时我们要把自己的页码值发送给父组件

然后在整理数据

 Vue电商项目--分页器制作

Vue电商项目--分页器制作

 getPageNo(pageNo){
      this.searchParams.pageNo=pageNo
      this.getData()
    }

分页器添加类名

Vue电商项目--分页器制作就是点击谁就给谁类名 文章来源地址https://www.toymoban.com/news/detail-460978.html

 &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }

到了这里,关于Vue电商项目--分页器制作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Django_Paginator分页器

    目录 分页器代码说明 简单demo 源码等资料获取方法 执行结果如下: 定义视图 添加路由 添加demo.html模板 界面第5页展示如下:   各位想获取源码的朋友请点赞 + 评论 + 收藏 ,三连! 三连 之后我会在评论区挨个私信发给你们~

    2024年02月15日
    浏览(51)
  • elementui 分页器,el-pagination 不显示的问题

    今天敲代码遇到了个很操蛋的问题,我把分页器封装成共用组件,一个组件显示分页器,另一个组件不显示分页器,我心想这么邪门的吗,这个是正常组件 这个组件不显示 然后我尝试把传给分页器的参数打印出来, 果然发现了操蛋的地方,这是正常显示的数据 这是不显示的

    2024年02月12日
    浏览(50)
  • element-UI 分页器Bug,切换页码,页码改变但是页码高亮未变化

    Element-UI提供了分页器的两个方法,handleSizeChange和handleCurrentChange,然而在实际使用中,却发现再切换页面展示数量的时候,会出现一些BUG, 页面刷新了,高亮页码却还是上次选择的页面。可以用以下方法解决; 翻看element文档中发现有current-page,当前页数,支持 .sync 修饰符

    2024年02月16日
    浏览(36)
  • 【分页表格】Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)

    这篇文章,主要介绍Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)。 目录 一、分页表格 1.1、运行效果 1.2、运行环境 1.3、案例代码

    2024年02月11日
    浏览(59)
  • 解决:element-ui分页器在将最后一页列表数据删完时,页面不刷新到最新数据

    一、问题: 在用element-ui分页器的时候,我将最后一页列表数据删完了,但是页面没刷新到最新数据。正常情况是,我删完最后一页数据后,分页器停留在上一页,并刷新列表数据,以下是删完后的页面展现 网络返回的数据说明 :(pageNo:当前页 pageSize:当前页展示的条数

    2024年02月20日
    浏览(42)
  • 湖仓一体电商项目(三):从头搭建12个大数据项目基础组件

    文章目录 一、搭建Zookeeper 1、上传zookeeper并解压,配置环境变量 2、在node3节点配置zookeeper

    2023年04月15日
    浏览(34)
  • [element plus] 分页组件使用 - vue

    学习关键语句: 饿了么加组件分页组件 element+分页组件 vue3 + 饿了么分页组件 必须要说明的是 , 这篇文章使用的分页组件样式包含了饿了么官方给出警告以后会弃用的部分 但是问题是什么呢? 问题就是我还没找到这个用 vmodel 绑定的使用方法 , 再加上现在也算是有点小忙 , 暂时

    2024年02月09日
    浏览(47)
  • vue3--element组件分页功能

    直接上代码: 我用的是element组件 首先是列表data是数据源 vue代码:

    2024年02月11日
    浏览(31)
  • 前端Vue仿美团地址管理组件列表组件 可用于电商平台收获地址管理

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包