1.0.27 • Published 2 months ago
@sword0916/wings-booklet v1.0.27
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();
刷新小册子示例
1.0.26
2 months ago
1.0.27
2 months ago
1.0.25
4 months ago
1.0.24
4 months ago
1.0.23
5 months ago
1.0.22
5 months ago
1.0.21
6 months ago
1.0.20
6 months ago
1.0.19
6 months ago
1.0.18
6 months ago
1.0.17
6 months ago
1.0.16
6 months ago
1.0.15
6 months ago
1.0.14
6 months ago
1.0.13
6 months ago
1.0.12
6 months ago
1.0.11
6 months ago
1.0.10
6 months ago
1.0.9
6 months ago
1.0.8
6 months ago
1.0.7
6 months ago
1.0.6
6 months ago
1.0.5
6 months ago
1.0.4
6 months ago
1.0.3
6 months ago
1.0.2
6 months ago
1.0.1
6 months ago