wings-booklet

npm地址:https://www.npmjs.com/package/@sword0916/wings-booklet

github地址:https://github.com/Sword0916/wings-booklet

简书地址:https://www.jianshu.com/p/d48c5a1823fc

一、项目安装和引用

1、安装

npm i @sword0916/wings-booklet

2、引用

import WingsBooklet from "@sword0916/wings-booklet"

二、创建小册子

1、初始化一个WingsBooklet

//多节点模式（多个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],
})

多节点垂直示例

单节点水平示例

2、参数列表

|序号|参数名|类型|默认值|说明| |----|----|----|----|----| |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页。

六、参数设置

1、设置缓动函数

内置了常用的缓动函数，并挂载到WingsFill的Easing属性了。

按照它们表示的方程类型进行分组：线性、二次、三次、四次、五次、正弦、指数、圆形、弹性、后退和反弹，然后按缓动类型：In、Out 和 InOut。

也可以设置一个遵循约定自定义缓动函数。 参数必须依次为：t初始时间,b起始位置,c移动的距离,d缓动执行多长时间

booklet.setEasing(WingsBooklet.Easing.Elastic.easeInOut);

2、设置跳转时长

booklet.setFlipDuration(2000);

设置缓动函数和跳转时长示例

3、设置跳转偏移量

booklet.setOffset(-50);

设置偏移量示例

4、链式调用

booklet.setOffset(200).setEasing(WingsBooklet.Easing.Bounce.easeInOut).setFlipDuration(5000).flipTo(2);

七、小册子刷新

页面内容改变时（删除某一页或者改变页面的宽高），flipTo不能跳转到改变后的新位置。刷新小册子后，flipTo才能跳转到新的位置。

booklet.refresh();

刷新小册子示例