快速实现 分页器(超简单) 可以直接用
2024-06-06 02:38:35
1.如果想直接,用请直接滑到最后(方便省事,有详细用法)
2. 如果想自己了解,下面有详细注释
下面是效果图:
1.首先创建一个组件定义为全局(结构已写好,可直接cv大法)
<div class="pagination"><button>上一页</button><button >1</button><span >···</span><button>15</button><button>16</button><button>17</button><button>18</button><button>19</button><span>···</span><button>50</button><button>下一页</button><span class="total">共 100 条</span></div>
</template>
2.在所需页面引入并传入参数即可
<!-- total:总数 pageNum:每页数量 continuSum连续数量 currentPage:当前页 goPage:点击更改回传的值-->
<Pagination :total='91' :pageNum='10' :continuSum='5' :currentPage="17" :goPage="goPage" />
3.在定义的组件中写入一下代码
<script>
export default {name: 'Pagination',// total:总数 pageNum:每页数量 continuSum连续数量 currentPage:当前页props: ['total', 'pageNum', 'continuSum', 'currentPage', 'goPage'],computed: {// 计算总页数pageSum() {return Math.ceil(this.total / this.pageNum)},// 计算连续开头与结尾stateAndEnd() {// 定义两个变量let startlet end// 第一种情况:当连续数量大于总页数时if (this.continuSum > this.pageSum) {start = 1end = this.pageSum} else {// 计算出正常情况下的开始与结尾start = this.currentPage - parseInt(this.continuSum / 2)end = this.currentPage + parseInt(this.continuSum / 2)// 如果 start 左边溢出了if (start < 1) {start = 1end = this.continuSum}// 如果 end 右边溢出了if (end > this.pageSum) {start = this.pageSum - this.continuSum + 1end = this.pageSum}}return { start, end }},},
}
</script>
4.根据start 与end 去判断页面的展示隐藏与遍历
注意: goPage() 是为了给父组件传递当前选中的值
<template><div class="pagination"><!-- 判断上一页禁用 (当前页小于2时)--><button :disabled='currentPage<2' @click='goPage(currentPage-1)'>上一页</button><!-- 判断单独的1显示隐藏 (当连续按钮的第一个>1时)--><button v-show="stateAndEnd.start> 1" @click="goPage(1)">1</button><!-- 判断...显示隐藏 (当连续按钮的第一个>2时)--><span v-show=" stateAndEnd.start> 2">···</span><!-- 连续按钮遍历出来,(次数为连续按钮未的值-连续按钮头的值+1) --><!-- active选中状态,(当前页 == 连续开头的值+索引值(连续的所有值)) --><button :class="{active:stateAndEnd.start+ix==currentPage}" v-for=" (continu,ix) in stateAndEnd.end-stateAndEnd.start+1"@click="goPage(stateAndEnd.start+ix)">{{stateAndEnd.start+ix}}</button><!-- 判断...显示隐藏 (当连续按钮的第一个<总页数-1时)--><span v-show="stateAndEnd.end < pageSum-1">···</span><!-- 判断单独的最后一个,显示隐藏 (当连续按钮的最后一个<总页数时)--><button @click="goPage(pageSum)" v-show="stateAndEnd.end <pageSum">{{pageSum}}</button><!-- 判断下一页禁用 (当前页大于总数-1时)--><button :disabled='currentPage>pageSum-1' @click='goPage(currentPage+1)'>下一页</button><span class="total">共 {{total}} 条</span></div>
</template>
5. 在父组件中改变传入的当前的页数
methods:{......//封装的接口reapi(num) {//当传值为1时进不来,//每次调用接口时当前页都会改为1//只有点击切换的时候不会走判断if (!num) {this.SearchPormse.pageNo = 1}this.$store.dispatch('search/getGoodList', this.SearchPormse)},// 改变当前页goPage(num) {this.SearchPormse.currentPage= num//调接口传标识this.reapi(1)},......
}
以下是直接用
1.创建一个组件,将如下代码直接cv大法, 并定义成全局
<template><div class="pagination"><button :disabled='currentPage<2' @click='goPage(currentPage-1)'>上一页</button><button v-show="stateAndEnd.start> 1" @click="goPage(1)">1</button><span v-show=" stateAndEnd.start> 2">···</span><button :class="{active:stateAndEnd.start+ix==currentPage}" v-for=" (continu,ix) in stateAndEnd.end-stateAndEnd.start+1" @click="goPage(stateAndEnd.start+ix)">{{stateAndEnd.start+ix}}</button><span v-show="stateAndEnd.end < pageSum-1">···</span><button @click="goPage(pageSum)" v-show="stateAndEnd.end <pageSum">{{pageSum}}</button><button :disabled='currentPage>pageSum-1' @click='goPage(currentPage+1)'>下一页</button><span class="total">共 {{total}} 条</span></div>
</template>
<script>
export default {name: 'Pagination',// total:总数 pageNum:每页数量 continuSum连续数量 currentPage:当前页props: ['total', 'pageNum', 'continuSum', 'currentPage', 'goPage'],computed: {pageSum() {return Math.ceil(this.total / this.pageNum)},stateAndEnd() {let startlet endif (this.continuSum > this.pageSum) {start = 1end = this.pageSum} else {start = this.currentPage - parseInt(this.continuSum / 2)end = this.currentPage + parseInt(this.continuSum / 2)if (start < 1) {start = 1end = this.continuSum}if (end > this.pageSum) {start = this.pageSum - this.continuSum + 1end = this.pageSum}}return { start, end }},},
}
</script><style lang="less" scoped>
.pagination {text-align: center;button {margin: 0 5px;background-color: #f4f4f5;color: gray;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: #c81623;color: #fff;}}span {display: inline-block;line-height: 28px;font-size: 14px;color: gray;vertical-align: middle;}.total {margin-left: 30px;}
}
</style>
在需要用到的地方直接写如下代码并配置值:
<Pagination :total='总数' :pageNum='每页数量' :continuSum='连续个数' :currentPage="当前页" :goPage="goPage" />
methods:{reapi(num) {if (!num) {this.SearchPormse.pageNo = 1}this.$store.dispatch('search/getGoodList', this.SearchPormse)},// 改变当前页goPage(num) {//更改当前页(自己写,我的是个例子)this.SearchPormse.pageNo = num//重新调用接口,传一个标识,只有改变当前页不用重置当前页,reapi(1) },}
快速实现 分页器(超简单) 可以直接用相关推荐
- CentOS快速搭建服务器 超简单
一.购买腾讯云学生优惠服务器 https://cloud.tencent.com/act/campus?fromSource=gwzcw.594895.594895.594895 二.在电脑上安装XS ...
- 如何快速处理图片？超简单实用的图片处理工具推荐
相信大家在平时的工作中都碰到过需要处理图片的情况,例如图片上有一些有瑕疵的边边角角需要去掉.图片背景不好看需要给图片抠图后换个背景等等,这些图片处理时一般需要借助一些专业的图片处理工具或者需要一定的专 ...
- 超简单让.NET Core开发者快速拥有CI/CD的能力-Docker版本
超简单让.NET Core开发者快速拥有CI/CD的能力-Docker版本 前言 上一篇自动化测试,全面且详细的介绍了从零开始到发布版本的步骤,这是传统的方式,本次为大家带来的是如何在5分钟内使用上d ...
- 超简单：快速制作一款高逼格词云图
词云图,也叫文字云,是对文本中出现频率较高的"关键词"予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨. 一.先看看几个词云图 ...
- 简单快速建立pytorch环境YOLOv5目标检测 模型跑起来(超简单）
简单快速建立pytorch环境+实现YOLOv5目标检测 模型跑起来(超简单) 一.下载yolov5模型代码: yolo代码 提取码:2022 下载后解压 二.简单快速创建pytorch环境: 1.条 ...
- python词云图制作壮观天体照_超简单：快速制作一款高逼格词云图
词云图,也叫文字云,是对文本中出现频率较高的"关键词"予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨. 一.先看看几个词云图 ...
- 快速解决 PS 2023 插件未经正确签署问题，超简单方便
一步搞定 ! 解决 PS 2023 和AI 2023 插件 扩展面板未签署 加载显示空白的问题 最新版的PS 2023 和AI 2023 发布之后,很多粉丝发现了问题,就是在 PS 2023 版本中运 ...
- 【超简单】快速复制有序号的代码
[大家好,我是编程的赛赛,专注于保姆级代码教程] [超简单系列分享一些程序界的生活小妙招,点个关注不迷路,我们开始学习吧] 在网上借(fu)鉴(zhi)代码时,难免会遇到有序号的代码,使用本文的方法, ...
- 图片怎么转jpg？教你两个超简单的图片转jpg格式的方法
图片怎么转jpg?我们平时在工作当中经常会使用到图片素材,这些图片素材各种格式都有,其中最常见的有jpg.png.webp等格式,但是这些图片素材在使用的时候却并不是都能直接用,因为大部分网络平台可以 ...
最新文章
- string to xml java_Java String to XML - Parse String to XML DOM Example - 入门小站-rumenz.com
- PHP在使用正则表达式验证，防注入的时候要注意一下的细节
- 《博德之门 3》究竟有多「DnD」？
- BZOJ 3224 普通平衡树 treap or vector
- 20175213 2018-2019-2 《Java程序设计》第7周学习总结
- Linux系统--CentOS 7.6.1810 安装 fping 3.15
- 对于DOM的attribute和property的一些思考
- public protected private
- linux flash文件系统,需要了解Linux flash文件系统
- 三阶魔方大中小魔公式_三阶魔方花样玩法,公式汇总
- 新猿木子李：0基础学python培训教程 Python操作Redis
- LWN：替换 congestion_wait()！
- 格林函数求解泊松方程介绍
- jBPM4的运行期环境
- 网址大全（hao123和2345）
- 华为社招/东莞、杭州、成都、西安
- 接口自动化测试项目实战
- JS-108~161
- 【CC2640】CC2640架构及原理
- 世上根本没有什么感同身受，只有冷暖自知