最近重新溫故以前JS的知識胀茵，發(fā)現(xiàn)有很多東西都忘記了载碌，就打算參考ant design里的分頁組件（pagination）來作為一個練習(xí)的小Demo組件，嘗試著用html讯泣、css纫普、js來實現(xiàn)一個分頁組件，以下是分組組件的代碼判帮，可能沒ant design里面的組件功能齊全局嘁，但是基本功能都實現(xiàn)出來，雖然說用JS頻繁的操作DOM節(jié)點消耗的性能比較大晦墙，但是這個Demo只是用來溫故以前所忘記的一些知識悦昵，所以項目要是真的需要用到，最好還是選擇目前以搭建好的框架作為最優(yōu)項晌畅。
廢話不多說但指，代碼奉上。
pagination.html
注釋的代碼可以不用管,這是之前設(shè)計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()函數(shù),我并沒有兼容其他瀏覽器(因為懶),所以要是有樣式不顯示的話,可能是這個問題,最好用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
這里的頁數(shù)就三頁,你可以在for循環(huán)那里增加頁碼的數(shù)量,一般項目都會調(diào)用接口來獲取數(shù)據(jù)的總數(shù)然后通過展示多少條來作為一頁,我這里為了方便就弄了三頁,相關(guān)代碼的優(yōu)化可能也沒有考慮到,畢竟本人比較菜。
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
