npm地址:https://www.npmjs.com/package/@sword0916/wings-booklet
github地址:https://github.com/Sword0916/wings-booklet
简书地址:https://www.jianshu.com/p/d48c5a1823fc
npm i @sword0916/wings-booklet
import WingsBooklet from "@sword0916/wings-booklet"
//多节点模式(多个dom,每个dom是一页)
let booklet = new WingsBooklet({
className: "page",
scrollDom: document.body
});
//单节点模式(一个dom,按比例或像素长度分割为多页)
booklet = new WingsBooklet({
scrollDom: document.getElementById("long-dom"),
splitProportions: [0.1, 0.2, 0.1, 0.2, 0.1, 0.2, 0.1],
})
多节点垂直示例
单节点水平示例
序号 | 参数名 | 类型 | 默认值 | 说明 |
---|---|---|---|---|
1 | scrollDom | dom | 出现滚动条的节点 | |
2 | className | string | page | 页的共有class |
3 | splitValues | array | 分割像素数组(单节点模式,取值范围是各页对应的长度,单位是px) | |
4 | splitProportions | array | 分割比例数组(单节点模式,取值范围是(0,1)且总和必须是1) | |
5 | splitNumber | number | 等比例分割份数(单节点模式,取值范围是正整数) | |
6 | direction | string | vertical | 滚动方向(vertical、horizontal) |
7 | easingFun | function | WingsBooklet.Easing.Linear | 缓动函数(默认线性,其他参照examples/00缓动函数示意.html) |
8 | flipDuration | number | 500 | 跳转时长(单位毫秒,最小100) |
9 | offset | number | 0 | 跳转的偏移量 |
10 | turnPage | function | 滚动翻页回调(回调参数:翻页前页索引,翻页后页索引) | |
11 | beforeFlipPage | function | 跳转前回调(回调参数:当前页索引) | |
12 | afterFlipPage | function | 跳转后回调(回调参数:当前页索引) |
booklet.getCurrentIndex();
booklet.getPageCount();
booklet.flipTo(2);//参数是索引,此例是跳转到第3页。
内置了常用的缓动函数,并挂载到WingsFill的Easing属性了。
按照它们表示的方程类型进行分组:线性、二次、三次、四次、五次、正弦、指数、圆形、弹性、后退和反弹,然后按缓动类型:In、Out 和 InOut。
也可以设置一个遵循约定自定义缓动函数。 参数必须依次为:t初始时间,b起始位置,c移动的距离,d缓动执行多长时间
booklet.setEasing(WingsBooklet.Easing.Elastic.easeInOut);
booklet.setFlipDuration(2000);
设置缓动函数和跳转时长示例
booklet.setOffset(-50);
设置偏移量示例
booklet.setOffset(200).setEasing(WingsBooklet.Easing.Bounce.easeInOut).setFlipDuration(5000).flipTo(2);
booklet.refresh();
刷新小册子示例