大家都应该上过淘宝的吧，没有上过淘宝的同学估计也没几个了，但是我相信大多数的人都是在淘宝上面买完东西就下线，很少有人会关注淘宝上的设计这类的，但是对于普通人这样还行，但是对于一个程序员这样就可不行了，因为博主本人是从事前端方面的工作，所以就通过仿照淘宝的设计样式，以求在技能上面能够有一个大的突破

一、淘宝分页控件了解

先上一张淘宝的分页图片：

根据上图中对淘宝分页控件的分析，我们大致上可以将淘宝分页控件分成两部分，一部分是核心部分，这一部分主要就是一个分页的核心功能，这个功能同时也是也是不可或缺的，还有一部分是拓展部分，这一部分是相当于增加一些功能来增强和改善用户体验的，但是在很多现成的分页控件是没有实现的(这个也是一个自己造轮子的理由之一)。但是依据我对淘宝分页控件的理解再结合工作上面的需求分析，我认为淘宝的分页控件要改成具有普适性的业务功能控件还需要有这些改动：

1、比如拓展部分感觉比较偏小了一点，以我个人的体验上来说不是挺好

2、由于淘宝的宝贝比较多，所以只需要显示到一百页就行了，但是在实际的项目中我们可能没有100页，所以我们需要显示到最后一页的页数就行了

3、由于拓展部分不是必须的，只是可以增强用户体验，但是有些时候页面给分页预留的位置不够，这个时候我们就可以通过设置来除去这一部分

 

二、基于bootstrap的仿淘宝分页控件输入参数设定

想一想，对于普通的分页控件，我们需要什么元素：pageNo(当前页)，pageSize(每页渲染个数)，count(总数),这几个控件是必不可少的，pageNo主要是用来标识要渲染第几页为当前页，pageSize和count主要是用来计算出要渲染的页数(pageCount)，pageCount的实现逻辑如下：

复制代码 
var pageCount=0; if(count%pageSize==0){
    pageCount=count/pageSize; }esle{
    pageCount=count/pageSize+1;
}
复制代码

这样我们就能保证了pageCount为我们所要渲染的最终的页数，除了这个基础配置还有一些其他的配置我认为也是需要增加的

1、增加对最后一个确定按钮的名称修改，这个可能在我们的业务中不叫确定而叫修改之类的名称，所以如果有一个可以修改的功能，那么也方便了业务的拓展（default:"确定"）

2、主色调修改，我们知道像淘宝的分页控件采用的是橙黄色的主色调，然后如果是按照经典的bootstrap的配色方案来看，是采用浅蓝色的，所以这个也要支持修改(default:lightblue)

3、支持showNum的配置，showNum指的是当pageNo=1的时候要显示的页数，例如淘宝的分页控件显示的是1到5页外加一个省略号。所以showNum=5，表示显示5页;(default:6)

4、支持skipPart，这一部分指的就是分页控件的拓展部分，这部分我们应该要按照需求来决定是否显示（default:true）

 * 括号内为参数的默认值

网友评论