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 会遍历…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
