vue 手写分页
【先看效果】
(1)内容小于2页
不展示页码
(2)1 < 内容页数< 限定展示页码
展示:页码、上下页;隐藏:首页、末页图标,上、下一区间码。即:(页数:3;限定展示页码:5)

(3)内容页数 > 展示页码
展示:页码、上下页、首页、末页图标,上、下一区间码,去输入指定页
隐藏:无



【VUE代码 html部分】
<ul v-if="pages > 1" class="am-pagination" style="text-align: center;"><li :class="pageIndex === 1 ? 'am-disabled':''" ><a v-if="pages>showPageNum" href="#" @click.prevent="changeIndex(1)" style="display: inline;" title="首页">«</a><a href="#" @click.prevent="changeIndex(pageIndex-1)" style="display: inline;" title="上一页">‹</a><input title="上一区间码" class="movePageNum" :class="prePageNumClass" style="margin-left: -5px;" type="button" @click="prePageNum" value="…"/></li><!-- 上一页 --><li v-for="p in computePages":key="p"@click.prevent="changeIndex(p)":class="pageIndex === p ? 'am-active':''"><a href="#">{{p}}</a></li><!-- 第1、2…n…页(pageSize=6) --><li :class="pageIndex === pages ? 'am-disabled':''" ><input title="下一区间码" class="movePageNum" :class="nextPageNumClass" style="margin-left: -5px;" type="button" @click="nextPageNum" value="…"/><a href="#" @click.prevent="changeIndex(pageIndex+1)" style="display: inline; margin-right: 5px;" title="下一页">›</a> <a v-if="pages>showPageNum" href="#" @click.prevent="changeIndex(pages)" style="display: inline;" title="末页">»</a></li><!-- 下一页 --><li v-if="pages>showPageNum" style="display: inline;"><span style="display: inline-block; border: 0; pointer-events: none; padding:0.5em 6px 0.5em 2px; " >去</span> <input ref="inputGotoPage" class="inputGotoPage" type="number" max="99999" min="1" oninput="if(value.length>4) value=value.slice(0,5)" value="1" /><span style="display: inline; border: 0; pointer-events: none; padding: 5px 0;">页</span><input title="点击跳转至相应页" class="movePageNum" type="button" @click="gotoPage" value="go"/></li>
</ul>
【VUE代码 JavaScript部分】
<script>export default {name: "NewsView",data(){return{newsPageList:[], // 数据集computePages:[],prePageNumClass:'',nextPageNumClass:'',pageIndex: 1,pageSize: 6, // 每页显示数量offset: 0,pages: 1,total: 0,showPageNum: 5, // 限制展示页码beginPageNum: 0,endPageNum: 0,}},mounted() {this.getNewList();},methods:{// 获取数据集getNewList(){this.getRequest("/api/page/news", {typeKey:'n_2_1_list', sort:'order_num', order: 'desc', isEnabled: 0, hideContent:"", limit: this.pageSize, offset: this.offset}).then(resp =>{if (resp && resp.code == 0 && resp.data != null){this.explainData(resp.data);}});},// 数据集解析explainData(respData){this.newsPageList = respData.rows;this.total = respData.totalthis.pages = Math.ceil(this.total / this.pageSize)// 首次加载,生成页码。后续加载,依据页码传参加载,依需 刷新页码if(this.endPageNum==0) this.freshPageNum(1);},/* 【新闻分页】----begin------------<<<<<<<<<<<<<<<<<<<<<<<<<-------------------------- */gotoPage(){var gotoPageVal = this.$refs.inputGotoPage.value;if(gotoPageVal){var gotoPage = parseInt(gotoPageVal)if(gotoPage<1){gotoPage = 1;this.$refs.inputGotoPage.value = 1;}if(gotoPage>this.pages) {gotoPage = this.pages;this.$refs.inputGotoPage.value = gotoPage;}if(gotoPage<this.beginPageNum || gotoPage>this.endPageNum) this.freshPageNum(gotoPage)this.changeIndex(gotoPage);}},prePageNum(){this.endPageNum = this.beginPageNum;this.beginPageNum = this.beginPageNum - this.showPageNum + 1if(this.beginPageNum<1) {this.beginPageNum = 1;}var changeIndex = (this.beginPageNum <= this.pageIndex && this.pageIndex <= this.endPageNum) ? this.pageIndex : this.endPageNum;this.freshPageNum(this.beginPageNum);this.changeIndex(changeIndex);},nextPageNum(){this.beginPageNum = this.endPageNum;this.endPageNum = this.endPageNum + this.showPageNum - 1if(this.endPageNum>this.pages) {this.beginPageNum = this.pages - this.showPageNum + 1;}var changeIndex = (this.beginPageNum <= this.pageIndex && this.pageIndex <= this.endPageNum)?this.pageIndex : this.beginPageNum;this.freshPageNum(this.beginPageNum);this.changeIndex(changeIndex);},// 页码总是最多展示 this.showPageNum 个// 三目运算,多语句,返回值为最后的语句结果 // condition ? (statement1, statement2, statement3) : (statement4, statement5); // true 返回值 statement3; false 返回值 statement5freshPageNum(start) {// 计算 起止页码var startMax = this.pages - this.showPageNum + 1; // 起始页码 的最大值start = start>startMax?startMax:start;start<=1?(this.prePageNumClass = 'hiddenChangePage', this.beginPageNum = start = 1):(this.prePageNumClass = 'showChangePage')var end = start + this.showPageNum - 1; // 根据 起始页码 计算 终止页码end = end > this.pages ? this.pages : end;end==this.pages ? (this.nextPageNumClass = 'hiddenChangePage'):(this.nextPageNumClass = 'showChangePage');this.beginPageNum = start;this.endPageNum = end;// 生成页码var arr = [];for (var i = start; i <= end; i++) {arr.push(i);}this.computePages = arr;},changeIndex(p){if(this.pageIndex != p) {// 只有切换页码,才请求数据。减少重复请求。this.pageIndex = p;this.offset = (this.pageIndex-1) * this.pageSize;this.getNewList();}if(p>this.endPageNum) return this.freshPageNum(p);if(p<this.beginPageNum) return this.freshPageNum(p-this.showPageNum + 1);if(p==1 || p==this.pages) this.freshPageNum(p); // 首、末的页},/* 【新闻分页】------end------------->>>>>>>>>>>>>>>---------------------- */},
}
</script>
【VUE代码 css部分】
<style scoped>.hiddenChangePage{display: none !important;
}
.showChangePage{display: inline !important;
}</style>
相关文章:
vue 手写分页
【先看效果】 (1)内容小于2页 不展示页码 (2)1 < 内容页数< 限定展示页码 展示:页码、上下页;隐藏:首页、末页图标,上、下一区间码。即:(页数&#…...
Spring Boot项目接收前端参数的11种方式
大家好,我是。在前后端项目交互中,前端传递的数据可以通过HTTP请求发送到后端, 后端在Spring Boot中如何接收各种复杂的前端数据呢?这篇文章总结了11种在Spring Boot中接收前端数据的方式。 1 搭建项目 1.通过Spring Initializr…...
Springboot项目:使用MockMvc测试get和post接口(含单个和多个请求参数场景)
一、引入MockMvc依赖 使用MockMvc,必须要引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>二、具体演示…...
OpenAI ChatGPT在心理治疗领域展现超凡同理心,通过图灵测试挑战人类专家
近期,一项关于OpenAI ChatGPT在心理治疗领域的研究更是引起了广泛关注。据报道,ChatGPT已经成功通过了治疗师领域的图灵测试,其表现甚至在某些方面超越了人类治疗师,尤其是在展现同理心方面,这一发现无疑为AI在心理健康…...
【HBase】HBaseJMX 接口监控信息实现钉钉告警
目录 一、JMX 简介 二、JMX监控信息钉钉告警实现 一、JMX 简介 官网:Apache HBase ™ Reference Guide JMX (Java管理扩展)提供了内置的工具,使您能够监视和管理Java VM。要启用远程系统的监视和管理,需要在启动Java…...
25旅游管理研究生复试面试问题汇总 旅游管理专业知识问题很全! 旅游管理复试全流程攻略 旅游管理考研复试真题汇总
旅游管理复试很难?! 别怕!经验超丰富的老学姐来给你们出谋划策啦! 最近是不是被旅游管理考研复试折磨得够呛?莫慌!我这有着丰富复试指导经验的老学姐来帮你们排雷,助力大家顺利上岸!…...
深入解析C++26 Execution Domain:设计原理与实战应用
一、Domain设计目标与核心价值 Domain是C26执行模型的策略载体,其核心解决两个问题: 执行策略泛化:将线程池、CUDA流等异构调度逻辑抽象为统一接口策略组合安全:通过类型隔离避免不同执行域的策略污染 // Domain类型定义示例&a…...
Linux命令基础
【Linux路径写法】 相对路径与绝对路径: 绝对路径:以根目录为起点,描述路径的一种写法,路径描述以 / 开头 相对路径:以当前目录为起点,描述路径的一种写法,路径描述无需以/开头 特殊路径符&…...
什么是超越编程(逾编程)(元编程?)
超越编程(逾编程)(元编程?)(meta-programming) 目录 1. meta- 的词源 2. 逾编程(meta-programming) 的直实含义 2.1 定义 2.2 说明 3. 翻译成“元编程”应该是一种错误 1. meta- 的词源 这是一个源自希腊语的构词元素,其有三种含义ÿ…...
netcore libreoffice word转pdf中文乱码
一、效果 解决: cd /usr/share/fonts/ mkdir zhFont cd zhFont #windows系统C:\Windows\Fonts 中复制/usr/share/fonts/zhFont sudo apt update sudo apt install xfonts-utils mkfontscale mkfontdir #刷新字体缓存 fc-cache -fv #查看已安装的字体列表 fc-list :…...
【练习】【回溯:组合:一个集合 元素可重复】力扣 39. 组合总和
题目 组合总和 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重…...
Mac 清理缓存,提高内存空间
步骤 1.打开【访达】 2.菜单栏第五个功能【前往】,点击【个人】 3.【command shift J】显示所有文件,打开【资源库】 4.删除【Containers】和【Caches】文件 Containers 文件夹:用于存储每个应用程序的沙盒数据,确保应用程序…...
数据结构——二叉树经典习题讲解
各位看官早安午安晚安呀 如果您觉得这篇文章对您有帮助的话 欢迎您一键三连,小编尽全力做到更好 欢迎您分享给更多人哦 大家好,我们今天来学习java数据结构的二叉树 递归很重要的一些注意事项: 1:递归你能不能掌握在于࿱…...
神经网络八股(三)
1.什么是梯度消失和梯度爆炸 梯度消失是指梯度在反向传播的过程中逐渐变小,最终趋近于零,这会导致靠前层的神经网络层权重参数更新缓慢,甚至不更新,学习不到有用的特征。 梯度爆炸是指梯度在方向传播过程中逐渐变大,…...
堆、优先队列、堆排序
堆: 定义: 必须是一个完全二叉树(完全二叉树:完全二叉树只允许最后一行不为满,且最后一行必须从左往右排序,最后一行元素之间不可以有间隔) 堆序性: 大根堆:每个父节点…...
vue 学习-vite api.js
/** 整机管理 * */ // 整机分类 列表 export const wholeMachineServersType params > ajaxGet({url: wholeMachine/serverstype/,params}) // 整机分类 新增 export const wholeMachineServersTypeAdd params > ajaxPost({url: wholeMachine/serverstype/,params}) /…...
java练习(35)
ps:题目来自力扣 整数反转 给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] ,就返回 0。 假设环境不允许存储 64 位整数(有符号或无符号)…...
PW_Balance
目录 1、 PW_Balance 1.1、 getDocumentsTypeID 1.2、 getShouldAmount 1.3、 setOptimalAmount 1.4、 setRemark PW_Balance package com.gx.pojo; public class PW_Balance { private Integer BalanceID; private Integer PaymentID; private Integer ReceptionID…...
【Linux-网络】HTTP的清风与HTTPS的密语
🎬 个人主页:谁在夜里看海. 📖 个人专栏:《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长,行则将至 目录 📚 引言 📚 一、HTTP 📖 1.概述 📖 2.URL ǵ…...
【前端框架】vue2和vue3的区别详细介绍
Vue 3 作为 Vue 2 的迭代版本,在性能、语法、架构设计等多个维度均有显著的变革与优化。以下详细剖析二者的区别: 响应式系统 Vue 2 实现原理:基于 Object.defineProperty() 方法实现响应式。当一个 Vue 实例创建时,Vue 会遍历…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
