手把手教你用原生JS实现新闻列表的分页拖拽翻页特效

现今诸多网站都有着广泛展示海量数据的需求，而分页功能乃是达成这些需求的关键技术手段。虽然在市面上存在着丰富多样的现成组件，然而掌握运用原生JavaScript去实现分页功能的思路，对于透彻理解其核心逻辑以及有效应对定制化需求而言是具备重要意义的 。

分页功能的基本构成

通常来讲，一个具备基础性质的分页组件一般涵盖几个处于核心地位的部分，其所涵部分之内情况是，在最左边的位置存在着一个被称作“上一页”的按钮，在最右边的位置存在着一个被称作“下一页”的按钮，而夹处于这两者中间的是呈连续性排列的数字形式的页码，另外，当总的页码数量较多的时候，会采用省略号这种形式来将部分页码予以隐藏，以此达成界面呈现方面的简洁状态。

该功能一般被设计成一个能够进行配置的JavaScript对象，关键的配置条目涵盖数据的总共页数，中间区域持续显示的页码数目，还有一个回调函数，当用户点击把页面切换时，这个回调函数会被触发，以此方便去执行数据加载之类的操作 。

初始化逻辑与边界判断

作为整个分页逻辑起始点的初始化方法，首先应当接收从后端接口获取的外部传入的总页数这一数字，其核心是由一些直接决定页码按钮与省略号显示状态的边界条件判断构成的 。

第一个判断是，判断总的页数，是不是小于或者等于预先设定的连续显示的数量。要是这个条件被满足了，就直接把全部的页码给显示出来，不需要省略号。比如说总的页数是三，连续显示的数量是五，那就直接把一、二、三展示出来就行。

 function Page(obj) {
     this.obj = obj||{page:1,page_count: 0};
     this.z_page = 7;    // 一共显示的页码数
     this.show_page = this.z_page-2; // 中间显示多少个页码  必须是个基数好看
     this.fn = this.obj.block;
     this.init()
 }

靠近首页时的显示规则

靠近开头的页面被用户浏览时，省略号的显示位置会产生变化，假设连续显示数量设定为5，当前页码为2，此时，页码1至5会被直接呈现，且在最后，也就是页码5之后增添一个省略号，用以表明后面存在页面。

这与初始化判断之中的某一种情形形成了对应：那就是当前页码比较小，这种程度还没有办法做到在左右两边做平均分配。在这样的时候，省略号仅仅是在右侧出现，这样子用来提示用户，后面还有更多的页面存在，然而因为前面处于首页附近这个缘故，是用不着省略的。

与之相反，当使用者浏览到达靠结束部位的页面之际，省略号会于左侧呈现出来。比如说，页面的总数是 fifty，现成位于此处标识为 forty- eight之际，连续所能显示的数量为 five。于此情形下，会率先给出一个省略号，接着便把 forty- six、forty- seven、forty- eight、forty- nine、fifty 这些页码予以展现。

针对这种情况进行判断，所依据的是，把当前页码加上右侧能够显示的平均页数之后，看是不是已经接近于或者超出了总页数，如果确实如此时，那个省略号在左侧呈现，表示可提供对前方有处于被折叠样式的页码信息提示 。

中间状态的显示处理

所处状态最为常见的情形是，此刻的页码既并非处在临近开头之处，又并非处在临近结尾之处。比如说，总的页数是三十，当前的页码为十五。在这种时候，用于分页的控件会一并展示左侧以及右侧的省略号。

确切呈现为：1（首页）、...（左省略号）、14、15、16、...（右省略号）、30（尾页），这般布局明晰确凿地展露了当下页码于整个序列里的所在位置，便利使用者跳转至更为遥远的区域。

DOM操作与事件绑定

完成所有状态判断，生成对应的页码数组之后，要进行DOM渲染。为提升性能，一般会用文档碎片（DocumentFragment）。先生成所有按钮元素的DOM节点，附到文档碎片里，最后一次性把碎片插入页面body，这可减少页面重排便数。

与此同时，针对每一个能够被点击的元素，这些元素包括上一页、下一页以及数字页码，都要为之绑定点击事件。此事件处理函数要对当前页码予以更新操作，重新开展计算工作并完成分页UI的渲染工作，还要调用预先设定好的回调函数，以此来告知外部当前页码已然发生了变更。

Page.prototype.create = function () {
     // page:1 page_count 17
     // 保证被点击的页数在中间
     var ping = (this.show_page-1)/2; // 左右显示的平均数  在中间
     var num = this.obj.page-ping; // 最小页码
     var endnum =  (this.obj.page+ping)>this.obj.page_count?this.obj.page_count:(this.obj.page+ping) // 最大页码
     console.log(endnum);
     var pageID = document.getElementById('pageID');
     var self= this;
     pageID.innerHTML = '';
     num = num<1?1:num;
     if (this.obj.page_count<= this.z_page) {
         alert('smallPage');
         this.smallPage()
     } else if( (this.obj.page+ping+1)>=this.obj.page_count) {// 还要加上最后一个   接近尾页
         pageID.appendChild(this.nearBack())
         console.log('尾巴')
     } else if ((ping+2)>=(this.obj.page)) {  //3   接近首页
         pageID.appendChild( this.nearHome())
         console.log('临近首页')
     }else {
         console.log(num,endnum);
         pageID.appendChild(this.centerPage(num,endnum));
     }
     document.onclick = function (event) {
         switch (event.target.className) {
             case 'previous':
                 self._previous();
                 break;
             case 'next':
                 self._next();
                 break;
             default:
                 self.clickLi(event.target);
         }
         self.fn(self.obj.page)
     }
 };

在项目里实现分页功能之际，你是更偏向于运用现成的UI库呢，还是会因特殊需求而去自行编写底层逻辑呀？欢迎于评论区分享你的看法以及经验倘若觉着本文有帮助的话，也请点赞予以支持 。