一、需求

今天逛segmenfault,发现一个人提了一个问题,简单描述一下:

目的是为了在一个容器中实现和window.scrollTo差不多的效果

需要的功能控件:

  1. 首页和尾页
  2. 上一页和下一页

基本的dom结构:

div#container
    ul
        li    

其中 #container 是容器,li定义为拥有高度和宽度的box,里面存放内容

要求点击按钮是的li能够进行上下翻页(其实就是fullpage的container版)

二、实现

秉着两种心态不用jquery封装代码,对他的这个问题进行了处理。

主要实现思想:

封装一个插件,做以下几步:

  1. 拿到容器 container
  2. 拿到容器内的所有的 li
  3. 拿到按钮
  4. 绑定按钮不同的事件
  5. 构建四个事件(上一页、下一页、首页、尾页)
  6. 构建核心翻页(滚动)插件

核心部分:

  1. 插件中封装了一个 nowPage 表示当前的页码(从0开始),初始的时候 nowPage为0,点击下一页,nowPage ++ (不超过总的li的数量)。
  2. 滚动部分一开始我是使用了 scrollTop(),google 和 firefox 能使用 $('#container').scrollTo(),(为了简化显示,我用了$()表示选择器),其他浏览器不行。
    因此后面使用的是scrollTop属性。

获取应当滚动的高度,通过需要滚动到的nowPage = nowPage++getBoundingClientRect()来获得。

滚动的函数定义如下:

 scrollPage: function (pageIndex) {
     // pageIndex 表示传递过来的 nowPage (nowPage是经过计算的,比如下一页nowPage +=1)
     height = this.list[pageIndex].getBoundingClientRect().height;
     // nowPage 实际上与li元素的排列顺序有关,因此通 *height 就能计算是第几个box。 nowPage 可以是 0
     height = pageIndex * height;
    // 对容器的 scrollTop 进行设置实现高度的滚动
     this.containerBox.scrollTop = height;
 },

三、优点:

  1. 由于我算是比较高度的封装,因此不需要考虑 li box 的高度,可以自动获取。
  2. 传递参数的时候只需要传递三个必要的选择器即可

    • 三个选择器分别是 container 、 li 列表 、button列表(列表按照顺序罗列的)
  3. 扩展起来很方便,随随便便做个动画上去

四、预览