原生js的分页插件
2021-02-02 23:16
阅读：614
标签：清空 封装 字段 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
评论
亲，登录后才可以留言！