在使用vue编写完一个分页器组件后,我对分页器的底层逻辑产生了兴趣,想在此组件的基础上再深入了解一些分页器的底层逻辑,了解vue与原生js的区别。我在github上看了一些大神写的分页器,属实牛逼,之后自己也根据他们的编写逻辑,反复推敲了个七八遍,也算是对分页器的逻辑掌握的差不多了,以下则是小编对原生js编写的一些体会。
首先我们需要明白在编写js时,我们需要在页面中创建哪些标签?标签应该赋予什么属性?分页器需要哪些数据?需要哪些函数?函数需要传哪些参数?总之,需要考虑的问题非常多,从构建到渲染再到功能实现都需要亲力亲为的。
页面构建思路:
所有按钮用a标签表示,全部放在一个div盒子中
点击切换的按钮有正常使用的属性值(prevPage和nextPage)和禁用属性值(disabled)
数值页面按钮有选中时的属性值(current)和未选中的属性值
创建出来的html和css代码如下:
html代码:
<div class="page"></div>
css代码:
a {
text-decoration: none;
}
.page {
display: table;
margin: 100px auto;
}
.page a {
cursor: default;
display: inline-block;
color: #00C9A6;
background-color: #D9F7F2;
height: 25px;
font-size: 10pt;
line-height: 25px;
padding: 0 9px;
border: 1px solid #D9F7F2;
margin: 0 2px;
border-radius: 4px;
vertical-align: middle;
}
.page a:not(.disabled):not(.current):hover {
border: 1px solid #00C9A6;
cursor: pointer;
}
.page a.current {
display: inline-block;
font-size: 10pt;
height: 25px;
line-height: 25px;
padding: 0 9px;
margin: 0 2px;
color: #fff;
background-color: #00C9A6;
border: 1px solid #00C9A6;
border-radius: 4px;
vertical-align: middle;
}
.page a.disabled {
display: inline-block;
font-size: 10pt;
height: 25px;
line-height: 25px;
padding: 0 9px;
margin: 0 2px