最近重新温故以前JS的知识，发现有很多东西都忘记了，就打算参考ant design里的分页组件（pagination）来作为一个练习的小Demo组件，尝试着用html、css、js来实现一个分页组件，以下是分组组件的代码，可能没ant design里面的组件功能齐全，但是基本功能都实现出来，虽然说用JS频繁的操作DOM节点消耗的性能比较大，但是这个Demo只是用来温故以前所忘记的一些知识，所以项目要是真的需要用到，最好还是选择目前以搭建好的框架作为最优项。
废话不多说，代码奉上。
pagination.html
注释的代码可以不用管,这是之前设计css样式留下来的,css和js文件都和html文件放在同一层目录下
<html>
<head>
<meta charset="UTF-8">
<title>Pagination</title>
<link type="text/css" rel="stylesheet" href="./pagination.css">
<script src="./pagination.js" type="text/javascript"></script>
</head>
<body>
<div id="pagination-box">
<ul id="pagination-ul">
<!-- <button id="pagination-btn-left">
<i></i>
</button>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<button id="pagination-btn-right">
<i></i>
</button> -->
</ul>
</div>
</body>
</html>
pagination.css
这里的css使用了var()函数,我并没有兼容其他浏览器(因为懒),所以要是有样式不显示的话,可能是这个问题,最好用chrome浏览器
:root {
--btn-border: 1px solid #d9d9d9;
--li-border: 1px solid #d9d9d9;
--hover-border: 1px solid #409EFF;
--hover-color: #409EFF;
}
#pagination-ul {
width: 100%;
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}
#pagination-btn-left, #pagination-btn-right {
outline: none;
text-align: center;
box-sizing: border-box;
display: block;
padding: 0;
border: var(--btn-border);
background-color: #FFFFFF;
border-radius: 3px;
}
#pagination-btn-left {
margin-right: 5px;
}
#pagination-btn-right {
margin-left: 5px;
}
.isSelect:hover {
border: var(--hover-border) !important;
}
.isSelect:hover i::before{
border-color: var(--hover-color) !important;
}
#pagination-btn-left i,
#pagination-btn-right i{
width: 30px;
height: 30px;
display: block;
position: relative;
}
#pagination-btn-left i::before,
#pagination-btn-right i::before{
content: "";
width: 6px;
height: 6px;
border-right: var(--btn-border);
border-bottom: var(--btn-border);
position: absolute;
left: 50%;
top: 50%;
}
#pagination-btn-left i::before{
transform: translate(-30%, -50%) rotate(135deg);
}
#pagination-btn-right i::before{
transform: translate(-50%,-50%) rotate(-45deg);
border-color: #000000;
}
.isSelect i::before {
border-color: #000000 !important;
}
.noSelect i::before{
border-color: #d9d9d9 !important;
}
#pagination-ul li {
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
border: var(--li-border);
border-radius: 3px;
margin: 0px 5px;
cursor: pointer;
}
#pagination-ul li a{
color: #000000;
cursor: pointer;
}
#pagination-ul li:hover{
border: var(--hover-border);
}
#pagination-ul li:hover a{
color: var(--hover-color);
opacity: 0.8;
}
.li-checked{
border: var(--hover-border) !important;
opacity: 1;
}
.a-checked{
color: var(--hover-color) !important;
font-weight: 600 !important;
}
pagination.js
这里的页数就三页,你可以在for循环那里增加页码的数量,一般项目都会调用接口来获取数据的总数然后通过展示多少条来作为一页,我这里为了方便就弄了三页,相关代码的优化可能也没有考虑到,毕竟本人比较菜。
window.onload = function(){
let paginationUlEvent = document.getElementById("pagination-ul");
let leftButton = document.createElement("button");
let rightButton = document.createElement("button");
let leftIcon = document.createElement("i");
let rightIcon = document.createElement("i");
let clickIndex = 0;
leftButton.id = "pagination-btn-left";
leftButton.style.cursor = "not-allowed";
leftButton.appendChild(leftIcon);
paginationUlEvent.appendChild(leftButton);
for(let j = 1;j<4;j++){
let li = document.createElement("li");
let a = document.createElement("a");
if(j == 1){
li.className = "li-checked";
a.className = "a-checked";
}
a.innerHTML = j;
li.appendChild(a);
paginationUlEvent.appendChild(li);
}
rightButton.id = "pagination-btn-right";
rightButton.className = "isSelect";
rightButton.style.cursor = "pointer";
rightButton.appendChild(rightIcon);
paginationUlEvent.appendChild(rightButton);
let liEvent = document.getElementsByTagName("li");
let aEvent = document.getElementsByTagName("a");
for(let i=0;i<liEvent.length;i++){
liEvent[i].onclick = function(e){
removeCheckedClass();
liEvent[i].className = "li-checked";
aEvent[i].className = "a-checked";
clickIndex = i;
console.log(i,liEvent.length-1)
switch (i){
case 0:
{
leftButton.style.cursor = "not-allowed";
rightButton.style.cursor = "pointer";
leftButton.className = "noSelect";
rightButton.className = "isSelect";
}
break;
case (liEvent.length - 1):
{
leftButton.style.cursor = "pointer";
rightButton.style.cursor = "not-allowed";
leftButton.className = "isSelect";
rightButton.className = "noSelect";
}
break;
default:
{
leftButton.style.cursor = "pointer";
rightButton.style.cursor = "pointer";
leftButton.className = "isSelect";
rightButton.className = "isSelect";
}
}
}
}
function removeCheckedClass(){
for(let i = 0;i<liEvent.length;i++){
if(liEvent[i].className == "li-checked"){
liEvent[i].className = "";
aEvent[i].className = "";
}
}
}
function clickButtonEvent(i){
removeCheckedClass();
liEvent[i].className = "li-checked";
aEvent[i].className = "a-checked";
clickIndex = i;
switch (i){
case 0:
{
leftButton.style.cursor = "not-allowed";
rightButton.style.cursor = "pointer";
leftButton.className = "noSelect";
rightButton.className = "isSelect";
}
break;
case (liEvent.length - 1):
{
leftButton.style.cursor = "pointer";
rightButton.style.cursor = "not-allowed";
leftButton.className = "isSelect";
rightButton.className = "noSelect";
}
break;
default:
{
leftButton.style.cursor = "pointer";
rightButton.style.cursor = "pointer";
leftButton.className = "isSelect";
rightButton.className = "isSelect";
}
}
}
leftButton.onclick = function () {
console.log(leftButton.style)
if(leftButton.style.cursor == "not-allowed"){
return false;
}else if(leftButton.style.cursor == "pointer"){
if(clickIndex <= 0){
return false;
}else{
let index = clickIndex - 1;
clickButtonEvent(index);
}
}
}
rightButton.onclick = function () {
if(rightButton.style.cursor == "not-allowed"){
return false;
}else if(rightButton.style.cursor == "pointer"){
if(clickIndex >= liEvent.length-1){
return false;
}else{
let index = clickIndex + 1;
clickButtonEvent(index);
}
}
}
}
展示效果如下：
分页组件.gif
