原生js的分页插件

2021-02-02 23:16

阅读：526

标签：清空封装字段 query 过多跳转 point == none

    style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .page {
            height: 40px;
            overflow: hidden;
            margin-top: 10px;
        }

        .page .page-content {
            height: 40px;
            float: left;
            margin-left: 10px;
        }

        .page .page-content li {
            width: 40px;
            height: 40px;
            background: #666;
            color: black;
            text-align: center;
            line-height: 40px;
            float: left;
            margin-left: 5px;
            cursor: pointer;
        }

        .page .page-content li.checked {
            background: orange;
            color: red;
        }

        .page span {
            width: 50px;
            height: 40px;
            background: skyblue;
            color: orange;
            text-align: center;
            line-height: 40px;
            float: left;
            margin-left: 10px;
            cursor: pointer;
        }

        .page span.checked {
            background: #999;
            color: #666;
        }
    style>
head>

body>
    div id="page" class="page">
    div>

html和css部分，较为常见，常规样式，重点在js部分。

这里的话，采用的是原生js写的一个分页插件，分享在博客里吧！主要是锻炼编程思维，下面也分享下自己的思路吧

// 分页插件的简单思路,较潦草,可能只有自己可以看懂,

// 第一步：写一个构造函数，定义要绑定的相关dom元素

// 第二步：在创建虚拟dom，写一个封装函数，来实现原本分页的静态页面再次实现

// 第三步：模拟创建一个数据对象，有总数据，每页显示数据，显示的页码数量，来动态生成每一个页码

// 第四步：在封装动态生成函数进行一个循环赋值页码中的数值

// 第五步: 封装点击事件相关函数,上一页和下一页,点击时让显示的页码数据++,或者--,同时让数据主体每次生成时为空,避免重复生成页码数

// 第六步: 同时需要注意,点击时.调用数据生成函数,在显示页码为1时,上一页不可点击,为最大页面时,下一页不可点击

// 第七步: 数据生成时,因为显示的是奇数,所以前后页码数相同,在显示的页码数大于中间值后,进行if判断，一个简单的算法问题

// 第八步: 点击页码时,也可以跳转,在生成li时,写li的点击函数,在内部再次调用数据生成函数,递归

// 参数分离,用Object.assign方法,更新数据

// 回调函数,绑定li是带参数显示的页码数,中间有很多细节,this指针问题就要多注意

其实写完还是有点累的，但效果还是挺不错的，思路大致在这里的，标红字段是代码中需要注意的地方，也是写难点，可能有些潦草，多担待呀！

原生js的分页插件

标签：清空封装字段 query 过多跳转 point == none

原文地址：https://www.cnblogs.com/icon-JIA/p/13166224.html

上一篇：Jmeter系列（23）- 详解 HTTP 信息头管理器

下一篇：nginx配置https

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：原生js的分页插件
文章链接：http://soscw.com/index.php/essay/50161.html

亲，登录后才可以留言！

原生js的分页插件

html和css部分，较为常见，常规样式，重点在js部分。

评论

热门文章

推荐文章

最新文章

置顶文章