【JS案例】分页器——使用原生JavaScript实现

Array[林]

已于 2022-07-19 15:05:43 修改

阅读量4.9k

点赞数 8

分类专栏：前端前端——JavaScript 文章标签： javascript 前端 html

于 2022-07-14 17:39:57 首次发布

本文链接：https://blog.csdn.net/m0_50785976/article/details/125786422

版权

本文介绍了如何使用原生JavaScript实现分页器，详细解析了分页器的页面构建思路、功能实现方法，以及与Vue框架的对比，强调了Vue在可复用性和维护性方面的优势。

摘要由CSDN通过智能技术生成

在使用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