vue 分页器组件+css动画效果

全网都找了一遍没有找到符合UI需求的分页动画,于是就主动上手了

需求:

1、分页最多显示9页,总页数最多显示无上限;

2、点击下一页的时候需要有动画效果过度,如果当前页数是当前显示最后的一页,则停了当前显示最后的位置,但是点击下一页的时候需要用户感知

效果如图所示:

1、代码如下:

 
<template><div><br>当前显示页面{{current}}<div class="pagination"><div @click="prevPage">上一页</div><div v-for="(item, index) in totalPages" :key="index" :class="{ 'active': current == item }"><div v-if="node.indexOf(item) != -1" class="point"></div></div><div @click="nextPage">下一页</div></div></div>
</template><script>
export default {name: 'Pagination',props: {totalPages: {type: Number,required: true},pageSize: {type: Number}},data() {return {current: 1, // 当前选中页node: [], // 当前显示的页数组}},methods: {prevPage() {if (this.current == 1) {return}this.current -= 1let noedeIndex = this.node[this.node.length - 1]this.$emit('pageChange', this.current)if ((noedeIndex - (this.current - 1)) > this.pageSize) {this.node.pop() // 删除最后一个this.node.unshift(this.current) // 开头插入一个}},nextPage() {if (this.current == this.totalPages) {return}this.current += 1this.$emit('pageChange', this.current)let noedeIndex = this.node[this.node.length - 1]// 当前页不等于最后一页,当前页大于等于展示页,当前页大于缓存数组的最后一页(确保重复加入)if (this.current > this.pageSize && (this.current > noedeIndex)) {this.node.shift() // 删除第一个this.node.push(this.current) // 最近最新一个}},},mounted() {for (let i = 1; i <= this.pageSize; i++) {this.node.push(i)}},
}
</script><style lang="less" scoped>
.pagination {display: flex;width: 100%;justify-content: center;
}.point {margin: 0 5px;width: 8px;height: 8px;// margin: -5px 0 0 0;border-radius: 50%;background: #B5AC97;transition: transform 0.3s, background 0.3s;}.active .point {-webkit-transform: scale3d(1.5, 1.5, 1);transform: scale3d(1.5, 1.5, 1);// width: 10px;// height: 10px;background: #FFE6AD;box-shadow: 0 0 4px 0 #FFE990;animation: 0.3s linear 0s 1 alternate example;}@keyframes example {0% {transform: scale3d(1, 1, 1);}25% {transform: scale3d(1, 1, 1);}50% {transform: scale3d(1.5, 1.5, 1);}100% {transform: scale3d(1.5, 1.5, 1);}
}
</style>

2、引用方式

 
<template><div><pagination :total-pages="totalPages" :page-size="9" @pageChange="handlePageChange" /></div>
</template><script>
import Pagination from './views/Pagination.vue'export default {components: {Pagination},data() {return {totalPages: 25,}},computed: {},methods: {handlePageChange(page) {console.log('page: ', page);}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/71401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法训练day36|贪心算法 part05(重叠区间三连击:LeetCode435. 无重叠区间763.划分字母区间56. 合并区间)

文章目录 435. 无重叠区间思路分析 763.划分字母区间思路分析代码实现思考总结 56. 合并区间思路分析 435. 无重叠区间 题目链接&#x1f525;&#x1f525; 给定一个区间的集合&#xff0c;找到需要移除区间的最小数量&#xff0c;使剩余区间互不重叠。 注意: 可以认为区间的…

第3章 【MySQL】字符集和比较规则

3.1 字符集和比较规则简介 3.1.1 字符集简介 如何存储字符串&#xff1f;需要建立字符与二进制数据的映射关系。建立这个关系需要&#xff1a; 1.把哪些字符映射成二进制数据&#xff1f; 2.怎么映射&#xff1f; 将一个字符映射成一个二进制数据的过程也叫做 编码 &#…

mybatis源码学习-3-解析器模块

1. 目录结构 XNode类&#xff1a; 作用&#xff1a;XNode 类表示XML文档中的一个节点&#xff08;Element或Node&#xff09;&#xff0c;它用于封装XML节点的信息&#xff0c;例如标签名、属性和子节点等。使用场景&#xff1a;MyBatis使用 XNode 来解析XML配置文件中的各种元…

长胜证券:资本市场的含义是什么?

本钱商场是指企业和政府通过证券生意来筹集资金并进行出资活动的商场。本钱商场通常被分为两个部分&#xff1a;初级商场和二级商场。初级商场是新证券发行的商场&#xff0c;而二级商场则是已发行证券的生意商场。本钱商场的展开程度是一个国家经济展开的重要目标之一。 从宏…

详解Transformer中的Encoder

一.Transformer架构 左半边是Encoder&#xff0c;右半边是Decoder。 二.Vision Transformer Vision Transformer取了Transformer的左半边。包含 Input EmbeddingPositional Encoding多头注意力机制 Add & Norm(前馈网络)Feed Forward Add & Norm 2.1 Input Embe…

企业架构LNMP学习笔记4

企业服务器LNMP环境搭建&#xff1a; 常见的软件架构&#xff1a; 1&#xff09;C/S: client/server 2&#xff09;B/S: browser/server 不管是C还是B&#xff0c;都是属于客户端属于前端。那么运维人员主要是负责和管理的Server端&#xff0c;也统称为服务器端。为了快速的…

RetroArch 接入两个同款手柄只能识别到一个导致无法双打的问题

测试平台 设备:StationPC M3 RetroArch: 1.1.5(当前官方最新) 手柄:北通蝙蝠BD2F(XBOX360键位) 问题说明 RetroArch插入两个同款手柄/摇杆时只能识别到一个&#xff0c;此时两个手柄都是可以控制模拟器&#xff0c;但是进入游戏也都是p1&#xff0c;无法实现双打 解决办法 …

Window安装虚拟机+给虚拟机安装Linux

一、虚拟机下载 这里使用Virtualbox虚拟机。可以直接从官网下载&#xff1a;Downloads – Oracle VM VirtualBox 点击进行下载&#xff0c;选择window版本的。直接双击&#xff0c;一直下一步 进行安装 PS&#xff1a;安装需要开启CPU虚拟化&#xff0c;一般电脑都已经开启了…

最新社区团购电商小程序源码 无bug完美运营版+详细搭建部署教程

分享一个开源社区团购电商小程序源码&#xff0c;无bug完美运营版&#xff0c;含完整前后端详细搭建部署教程。 系统运营模式&#xff1a;整合线下社区资源&#xff0c;由各快递代收点、社区便利店、社区物业、业主等发起的社区微信群&#xff0c;推送商品信息&#xff0c;消费…

【数据恢复】.360勒索病毒|金蝶、用友、OA、ERP等软件数据库恢复

引言&#xff1a; 在当今数字化的时代&#xff0c;网络犯罪已经演变成了一场全球性的威胁&#xff0c;而 360 勒索病毒则是其中最为可怕和具有破坏性的威胁之一。这种恶意软件以其危害深远、难以防范的特点而令人震惊。本文91数据恢复将深入探讨 360 勒索病毒的可怕性&#xff…

sql:SQL优化知识点记录(九)

&#xff08;1&#xff09;小表驱动大表 对sql调优的分析&#xff1a; 排序优化&#xff1a; 数据库的连接方式&#xff0c;里面的数据尽量这样连接&#xff0c;尽量选择第一个方式&#xff0c;因为两个表的连接一共建立5次连接&#xff0c;第二个建立1000次连接&#xff0c;从…

使用spring自带的发布订阅机制来实现消息发布订阅

背景 公司的项目以前代码里面有存在使用spring自带发布订阅的代码&#xff0c;因此稍微学习一下如何使用&#xff0c;并了解一下这种实现方式的优缺点。 优点 实现方便&#xff0c;代码方面基本只需要定义消息体和消费者&#xff0c;适用于小型应用程序。不依赖外部中间件&a…

h5微传单制作教程:快速轻松制作

在当今社交媒体充斥的时代&#xff0c;微传单作为一种新型的宣传推广方式&#xff0c;成为了企业和个人在传播信息时的重要工具。h5微传单相比传统的纸质传单更加灵活多样&#xff0c;并且能够通过手机、平板等设备随时随地进行浏览和分享&#xff0c;具有很高的传播效果。下面…

SpringMVC_SSM整合

一、回顾SpringMVC访问接口流程 1.容器加载分析 容器分析 手动注册WebApplicationContext public class ServletConfig extends AbstractDispatcherServletInitializer {Overrideprotected WebApplicationContext createServletApplicationContext() {//获取SpringMVC容器An…

Python实现猎人猎物优化算法(HPO)优化卷积神经网络回归模型(CNN回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…

OpenCV(二十八):连通域分割

目录 1.介绍连通域分割 2.像素领域介绍 3.两遍法分割连通域 4.连通域分割函数 1.介绍连通域分割 连通域分割是一种图像处理技术&#xff0c;用于将图像中的相邻像素组成的区域划分为不同的连通域。这些像素具有相似的特性&#xff0c;如相近的灰度值或颜色。连通域分割可以…

ue5 物理场的应用

cable mat wpo particle 流体粒子 choas 破损 刚体 布料 cloud abp blueprint riggedbody 体积雾 毛发 全局的 局部的 非均匀的 连续变化的 也可以多个叠加 从全局 到 范围 除了vector还有scalar的值也就是0--1的黑白灰的值 但是最终输出的值的类型还是取决于这个 一…

链动2+1天天秒商城商业模式

链动21天天秒商城商业模式 在当今市场&#xff0c;一种名为链动21天天的秒杀商城商业模式正在引发广泛关注。这种创新的商业模式具有快速拓展市场的强大能力&#xff0c;让许多用户和商家都感到非常惊讶。那么&#xff0c;这种模式究竟是什么&#xff0c;它又为何具有如此大的…

【前端打怪升级日志之CSS篇】position定位

学习链接&#xff1a;阮一峰CSS定位详解 学习总结&#xff1a; 学习应用&#xff1a;待补充。。。

STM32-DMA

1 DMA简介 DMA&#xff08;Direct Memory Access&#xff09;,中文名为直接内存访问&#xff0c;它是一些计算机总线架构提供的功能&#xff0c;能使数据从附加设备&#xff08;如磁盘驱动器&#xff09;直接发送到计算机主板的内存上。对应嵌入式处理器来说&#xff0c;DMA可…