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.rhkb.cn/news/124438.html

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

相关文章

337. 打家劫舍 III

337. 打家劫舍 III C代码&#xff1a;二叉树 动态规划 typedef struct { // 每个节点都有两个状态&#xff1a;选中、不选中int selected;int notSelected; } SubtreeStatus;SubtreeStatus dfs(struct TreeNode *node) {if (!node) {return (SubtreeStatus){0, 0};}SubtreeS…

FPGA实战小项目2

基于FPGA的贪吃蛇游戏 基于FPGA的贪吃蛇游戏 基于fpga的数字密码锁ego1 基于fpga的数字密码锁ego1 基于fpga的数字时钟 basys3 基于fpga的数字时钟 basys3

【人月神话】重新探索人月神话:软件工程的现实与挑战

人月神话是一篇由美国软件工程师弗雷德里克布鲁克斯所写的软件工程经典之作&#xff0c;最早发表于1975年。这篇文章的全名是《人月神话&#xff1a;软件工程的神话与现实》&#xff08;The Mythical Man-Month: Essays on Software Engineering&#xff09;&#xff0c;它涵盖…

【算法专题突破】双指针 - 三数之和(7)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;15. 三数之和 - 力扣&#xff08;Leetcode&#xff09; 题目就是要找出和为0的不重复的三元组&#xff0c; 注意三元组的每个元素是得不同的位置&#xff0c;那不重复又…

JDK1.8下载、安装和环境配置使用

JDK1.8下载、安装和配置 下载安装包解压文件配置测试安装 下载安装包 链接地址 https://pan.baidu.com/s/1RF7-ulq0_qAelpXskDxdvA 提取码 d1y0解压文件 jdk1.8.0_181 配置 右击我的电脑&#xff0c;选择属性 2.点击高级系统设置 在系统变量区里点击&#xff1a;新建…

数据结构-01 数据结构基本概念,算法时间复杂度,空间复杂度

0 数据结构概述 四门课的关系 1 绪论 数据对象、数据元素、数据项关系 1.1 数据结构的基本概念 1.2 算法和算法评价 小练习 空间复杂度中的递归调用 n只是传入 n也是数组&#xff0c;计算存储数组flag的空间大小

【嵌入式软件C编程】主函数free子函数malloc地址的两种方式以及注意事项

本文档主要记录嵌入式C语言在子函数中应用malloc函数的方式&#xff0c;在实际项目中内存管理特别重要 一般在主函数中&#xff08;main&#xff09;使用malloc函数&#xff0c;然后在通过free函数进行释放内存&#xff0c;但有时候如果必须在子函数长调用malloc函数该怎样进行…

【MySql】数据库的CRUD(增删查改)

写在最前面的话 哈喽&#xff0c;宝子们&#xff0c;今天给大家带来的是MySql数据库的CRUD&#xff08;增删改查&#xff09;&#xff0c;CRUD是数据库非常基础的部分&#xff0c;也是后端开发日常工作中最主要的一项工作&#xff0c;接下来让我们一起进入学习吧&#xff0c;感…

多功能透明屏,在智能家居领域中,有哪些功能特点?显示、连接

多功能透明屏是一种新型的显示技术&#xff0c;它能够在透明的表面上显示图像和视频&#xff0c;并且具有多种功能。 这种屏幕可以应用于各种领域&#xff0c;如商业广告、智能家居、教育等&#xff0c;为用户提供更加便捷和多样化的体验。 首先&#xff0c;多功能透明屏可以…

DockerCompose部署es和kibana

DockerCompose文件 version: 3.1 services:elasticsearch:image: elasticsearch:7.13.3container_name: elasticsearchprivileged: trueports:- "9200:9200"- "9300:9300"environment:- ES_JAVA_OPTS-Xms128m -Xmx1024m #设置使用jvm内存大小- cluster.na…

【牛客刷题】bfs和dfs (二叉树层序遍历、矩阵最长递增路径、被围绕的区域)

二叉树层序遍历 vector<vector<int> > levelOrder(TreeNode* root) {// write code herevector<int> res;vector<vector<int>> result;if (root nullptr) return result;queue<TreeNode*> que;que.push(root);while (!que.empty()) {int …

算法专题:前缀和

文章目录 Acwing&#xff1a;前缀和示例2845.统计趣味子数组的数目思路容易理解的写法&#xff1a;前缀和两层循环存在问题&#xff1a;超时 优化写法&#xff1a;两数之和思路&#xff0c;转换为哈希表 前缀和&#xff0c;就是求数组中某一段的所有元素的和。 求子数组中某一…

【C++基础】类与对象(中):默认成员函数、构造函数、析构函数、拷贝构造、赋值重载函数……

​&#x1f47b;内容专栏&#xff1a; C/C编程 &#x1f428;本文概括&#xff1a; C基础语法。六大默认构造函数简介、构造函数、析构函数、拷贝构造函数、赋值重载函数、const成员函数、取地址重载等。 &#x1f43c;本文作者&#xff1a; 阿四啊 &#x1f438;发布时间&…

K8S:kubeadm搭建K8S+Harbor 私有仓库

文章目录 一.部署规划1.主机规划2.部署流程 二.kubeadm搭建K8S1.环境准备2.安装docker3. 安装kubeadm&#xff0c;kubelet和kubectl4.部署K8S集群&#xff08;1&#xff09;初始化&#xff08;2&#xff09;部署网络插件flannel&#xff08;3&#xff09;创建 pod 资源 5.部署 …

网络编程套接字,Linux下实现echo服务器和客户端

目录 1、一些网络中的名词 1.1 IP地址 1.2 端口号port 1.3 "端口号" 和 "进程ID" 1.4 初始TCP协议 1.5 UDP协议 2、socket编程接口 2.1 socket 常见API 2.2 sockaddr结构 3、简单的网络程序 3.1 udp实现echo服务器和客户端 3.1.1 echo服务器实…

C++ 数组

C 数组 C 支持数组数据结构&#xff0c;它可以存储一个固定大小的相同类型元素的顺序集合。数组是用来存储一系列数据&#xff0c;但它往往被认为是一系列相同类型的变量。 数组的声明并不是声明一个个单独的变量&#xff0c;比如 number0、number1、...、number99&#xff0…

爬虫逆向实战(30)-某查查股东关联公司(HmacSHA512)

一、数据接口分析 主页地址&#xff1a;某查查 1、抓包 通过抓包可以发现数据接口是api/people/getRelatCompany 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无 请求头是否加密&#xff1f; 通过查看“标头”可以发现&#xff0c;请求头中有一个key和value都是…

记一次生产环境服务卡死排查记录

接现场运维报告某java服务CPU狂飙&#xff0c;服务处于卡死无响应状态 询问现场运维什么场景造成的&#xff0c;答复是偶发现象&#xff0c;没有规律&#xff0c;和请求高峰期并没有关系。 因为服务是负载均衡的&#xff08;A、B两台&#xff09;&#xff0c;临时处理让运维重…

【网络通信 -- WebRTC】FlexFec 基本知识点总结概述

【网络通信 -- WebRTC】FlexFec 基本知识点总结概述 【1】FlexFec 的保护方案 假设存在一组源数据包(D L)&#xff0c;其序列号从 1 开始运行到 D L 一维非交错行 FEC(1-D Non-interleaved Row FEC) : 一种连续的源数据包进行保护的方案&#xff0c;可用于恢复按行分组的源…

LaTeX总结-2023年9月8日

1. LaTeX总结 文章目录 1. LaTeX总结1.1. 定义作者&#xff0c;通讯作者&#xff0c;地址&#xff0c;宏包1.1.1. Example 11.1.2. Example 21.1.3. 特殊符号——作者标注注 1.2. 调整字体1.2.1. 数学模式下使用正体1.2.2. LaTeX内使用中文1.2.3. 正文文字 1.3. 常用符号及字母…