前端分页功能库小册子（wings-booklet）

在前端开发过程中经常会遇到分页的功能，例如合同、文档、长图的展示等，此时为了更优雅地解决分页内容和分页页码的同步问题，wings-booklet（小册子）应运而生。 小册子主要有两个功能：1、页面滚动翻页时，可以获得当前的页码；2、需要翻到第几页时，可以将对应页面滚动到视口中； 本项目也已经发布到npm和github上了。希望大家多多star。

npm地址:www.npmjs.com/package/@sw…

github地址:github.com/Sword0916/w…

以下是示例展示：

00、说明

以下所有示例的关键代码中会有几个相同的方法，在此统一说明，具体示例中不再另行解释。

(1)拖动滚动条翻页时会执行turnPage回调方法，使用跳转方法（flipTo）时，会在跳转前执行beforeFlipPage回调方法，跳转结束后会执行afterFlipPage回调方法。

//滚动翻页后回调(滚动翻页时触发)
function turnPage(pastIndex, currentIndex) {
    console.log("turnPage", `从 ${pastIndex} 到 ${currentIndex}`);
}

//跳转开始前回调(跳转某页开始前触发)
function beforeFlipPage(currentIndex) {
    console.log("beforeFlipPage", `当前是 ${currentIndex}`);
}

//跳转结束后回调(跳转某页结束后触发)
function afterFlipPage(currentIndex) {
    console.log("afterFlipPage", `当前是 ${currentIndex}`);
}

(2)示例中的页码点击会跳转到对应的页面。

//页面的跳转方法
booklet.flipTo(2); //参数代表页面索引，此处是跳转到第3页。

01、多节点垂直分页

多个dom节点垂直排列，每个dom节点视为一页。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,//出现滚动条的节点
    className: "page",//每一页共有的class
    turnPage: turnPage,//滚动翻页回调
    beforeFlipPage: beforeFlipPage,//跳转前回调
    afterFlipPage: afterFlipPage//跳转后回调
});

02、多节点水平分页

多个dom节点水平排列，每个dom节点视为一页。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    className: "page",
    direction: "horizontal",//设置水平方向
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

03、单节点垂直等分分页

单个dom节点需要垂直逻辑分页时使用。示例中是一张长图，现将这张长图等分为10份，每一份视为一页。以此实现分页的效果。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    splitNumber: 10,//设置分割份数
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

04、单节点水平等分分页

单个dom节点需要水平逻辑分页时使用。示例中是一张长图，现将这张长图等分为10份，每一份视为一页。以此实现分页的效果。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    splitNumber: 10,//设置分割份数
    direction: "horizontal",//设置水平方向
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

05、单节点垂直不等分分页

单个dom节点需要垂直逻辑分页时使用。示例中是一张长图，现将这张长图安指定比例分为7份，每一份视为一页。以此实现分页的效果。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    splitProportions: [0.1, 0.2, 0.1, 0.2, 0.1, 0.2, 0.1],//设置分割比例
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage/
});

06、单节点水平不等分分页

单个dom节点需要水平逻辑分页时使用。示例中是一张长图，现将这张长图安指定比例分为7份，每一份视为一页。以此实现分页的效果。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    splitProportions: [0.1, 0.2, 0.1, 0.2, 0.1, 0.2, 0.1],//设置分割比例
    direction: "horizontal",//设置水平方向
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

07、单节点垂直按值分页

单个dom节点需要垂直逻辑分页时使用。示例中是一张长图，现将这张长图安指像素长度分为7份，每一份视为一页。以此实现分页的效果。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    splitValues: [300, 600, 300, 600, 300, 600, 300],//设置分割长度
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

08、单节点水平按值分页

单个dom节点需要水平逻辑分页时使用。示例中是一张长图，现将这张长图安指定像素长度分为7份，每一份视为一页。以此实现分页的效果。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    splitValues: [300, 600, 300, 600, 300, 600, 300],//设置分割长度
    direction: "horizontal",//设置水平方向
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

09、设置跳转缓动函数和时长

使用页面跳转方法（flipTo）时，可以自定义跳转时长和缓动方法。 小册子内置了常用的缓动函数，并挂载到WingsFill的Easing属性了。 按照它们表示的方程类型进行分组：线性、二次、三次、四次、五次、正弦、指数、圆形、弹性、后退和反弹，然后按缓动类型：In、Out 和 InOut。 也可以设置一个遵循约定自定义缓动函数。 参数必须依次为：t初始时间,b起始位置,c移动的距离,d缓动执行多长时间

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    className: "page",
    easingFun: WingsBooklet.Easing.Elastic.easeInOut,//设置缓动函数
    flipDuration: 2000,//设置跳转的时长（单位是毫秒）
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

10、设置跳转的偏移量

每页的起始位置可以根据自己的需要设置偏移量。

//关键代码片段
let scrollDom = document.getElementById("scroll-box");//出现滚动条的节点
let booklet = new WingsBooklet({
    scrollDom: scrollDom,
    className: "page",
    offset: -50, //设置偏移量
    turnPage: turnPage,
    beforeFlipPage: beforeFlipPage,
    afterFlipPage: afterFlipPage
});

11、刷新小册子

当页面高度（或宽度）发生变化或页面数量发生改变时，会出现小册子的逻辑分页与实际不符的情况。此时各回调方法的执行可能会不符合预期效果，需要使用refresh()方法刷新小册子的逻辑分页数据。

//关键代码片段
let refreshBtn = document.getElementById("refresh-btn");//刷新按钮
refreshBtn.onclick = (e) => {
    booklet.refresh(); //booklet是初始化的小册子实例
}