分页器初体验

1.

一般来说分页器很多地方都用的上所以我们将分页器放在全局组件上

2.

我们需要向这个组件上传几个参数,使用props进行父向子传值,传入了有

根据总共的数据和每一页能放多少个数据,我们可以求出一共有多少页

注意这里我们要向上取整,

3.

完成这一步之后就完成了一大半

4. 设置7个button 第一个button是上一页

这个按钮主要是点击的时候将页面数减1 并且将减完后的页面数传到父组件中重新发送请求

当这时页面数为1时,触发disable 就不能点击

第二个按钮是 1 按钮

 这个按钮主要时点击时将页面数为1 并且传到父组件进行请求数据

注意的是当前的页面数为1,2,3的时候下面的那个中间部分也会显示,所以只有当开始页面大于1的时候才有(这里我估计只有我能看懂  过几天我估计也看不懂)

第三个按钮

这个按钮没什么,就当开始页码数大于2时才显示

第四个按钮

     

这个按钮主要是显示中间的5个按钮(v-for),v-for到页码结束时,当只有大于页码开始才显示,所以可以控制只显示5个按钮,然后点击发送事件跟上面的大致相同

第五个按钮

这个按钮与之前的...按钮相似,但注意的是只有当小于结束页码-1才会显示,搞不明白逻辑,用蠢方法列举几次

第六个按钮

 没啥好说 跟之前的1按钮一样

第七个

 4.

到最后一步利用在子组件发送过来的数据进行发送请求,这里有一个需要注意,这里的发送事件$emit 没有this (基础还是不好的表现)

 2022.1.13    7.50-----9.57

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值