轻量的移动端 H5 翻页库，提供了必要的配置选项和 API，同时具有高性能的特点。目前百度 H5 运行时页面在使用。 支持的功能：
- 横向或竖向滑动
- 循环翻页
- 总体和页面级别过渡效果
- 页面级别禁止滑动
- 外部 API 调用
- 完善的事件机制
- 可扩展的过渡动画
只需三步即可完成：
-
引入 js 和 css，可以按照下面两种方式之一进行：
- 在 release 页面下载构建好的 js 和 css；
- 通过 npm 或 yarn 安装，命令
npm install fex-swiper或yarn add fex-swiper，目的文件在dist目录下；
-
创建一个容器
div，注意：这个容器必须是有宽度和高度（如 100% 或者 650px）；
<div class="outer-container"></div>- 准备数据，创建 swiper。
var list = [{
content: '<h1>第 0 页</h1>'
}, {
content: '<h1>第 1 页</h1>'
}, {
content: '<h1>第 2 页</h1>'
}];
var swiper = new Swiper({
container: document.querySelector('.outer-container'),
data: list
});具体可以参考 simple.html
Swiper 定义了两个数据类型: Transition 和 Page，Transition 用于描述翻页过渡动画，Page 用于描述页面。
{
// 过渡动画名称，目前提供了 5 种过渡动画
name: 'slide' | 'rotate' | 'flip' | 'card' | 'fade'
// 过渡动画时长，单位为 ms
duration: Number
// 只允许滑动方向 1: 后向，-1: 前向，0:双向禁止滑动，默认为 undefined，即不限制任何方向的滑动
direction: 1 | -1 | 0
}{
// 本页面内容，可以是 DOM 或者 string
content: DOM or string,
// 本页面翻页过渡动画
transition: Transition
}所有的配置项都是可选的
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| container | DOM or string |
document.body | swiper 的外层容器 |
| data | Page[] | [] | 所有页面的数据 |
| debug | boolean | false |
是否开启调试模式 |
| isVertical | boolean | true |
是否是垂直方向滑动 |
| isLoop | boolean | false |
是否开启循环翻页 |
| keepDefaultClasses | string[] | [] | 保持默认行为的 class 名，详见说明 |
| transition | Transition | {name: 'slide', duration: 800} |
翻页过渡动画，按照优先级取值，详见优先级 |
为防止滑动事件中断，Swiper 默认阻止所有除了 a, input, textarea, select 以外的所有元素的滑动事件(mouseXXX, touchXXX)默认行为。但是在实际项目中，可能还有一些元素需要被排除在外（如微信中，长按图片会有识别二维码的响应，因此就需要将该图片的 className 放入该数组中），加入到 keepDefaultClasses 的元素及其 后代元素 均会被排除在外。因此 keepDefaultClasses 就是一个 要保持默认响应的元素 class 的白名单。
swipeTo 函数设定的翻页效果 > 当前页面的翻页效果 > 全局的翻页效果。
若高优先级已经设定，以高优先级的为准，若未设定，采用低一优先级的翻页效果。
Swiper 提供了 7 个事件，按照滑动开始到结束的顺序介绍如下：
| 事件名 | 触发时机 |
|---|---|
| swipeStart | 在页面开始滑动时触发 |
| swipeMoving | 在页面滑动时触发 |
| swipeChanged | 在翻页完成时触发 |
| swipeRestore | 在回弹开始时触发 |
| swipeRestored | 在回弹完成时触发 |
| activePageChanged | 下一页有变动时触发 |
| destroy | 销毁实例时触发 |
其中，页面滑动有两个结果：回弹和翻页。
回弹即页码没有变化，恢复原状。
翻页即页码产生变化，翻到了下一页。
Swiper 提供了 5 个接口供外部调用：
| 函数名 | 作用 |
|---|---|
| swipeTo | 翻到指定页面 |
| swipePrev | 翻到上一页 |
| swipeNext | 翻到下一页 |
| on | 监听事件 |
| off | 取消监听事件 |
swipeTo 函数用于将页面翻到指定页码（从 0 开始计），可以指定翻页过渡动画。不受页面禁止滑动配置选项的限制。
swiper.swipeTo(toIndex, transition);toIndex: Number, 翻到的页码，从 0 开始计。transition: [可选]Transition, 翻页动画，若未指定，则使用当前翻页效果。
swiper = new Swiper();
// 翻到第 0 页
swiper.swipeTo(0);
// 翻到第 3 页，以 rotate 过渡效果
swiper.swipeTo(3, {name: 'rotate'});swipePrev 函数用于将页面翻到上一页，可以指定翻页过渡动画。不受页面禁止滑动配置选项的限制。
swiper.swipePrev(transition);transition: [可选]Transition, 翻页动画，若未指定，则使用当前翻页效果。
swiper = new Swiper();
// 翻到上一页，以默认效果
swiper.swipePrev();swipeNext 函数用于将页面翻到下一页，可以指定翻页过渡动画。不受页面禁止滑动配置选项的限制。
swiper.swipeNext(transition);transition: [可选]Transition, 翻页动画，若未指定，则使用当前翻页效果。
swiper = new Swiper();
// 翻到下一页，以 flip 过渡效果
swiper.swipeNext({name: 'flip'});getCurrentIndex 函数用于获取当前页面的序号（从 0 开始计）。
swiper.getCurrentIndex();- 无
swiper = new Swiper();
// 获取当前页面序号
swiper.getCurrentIndex();on 函数用于监听事件。
swiper.on(eventName, listener);eventName: string, swiper 事件。listener: Function, 当所监听事件触发时，就会接收到通知并执行该函数，拥有 1 个参数event。event: Object, 默认包含name属性，表示当前的事件名。
swiper = new Swiper();
// 监听 swipeChanged 事件，会在页面完成翻页时触发
swiper.on('swipeChanged', function (e) {
console.log(e.name + 'fired');
});off 函数用于取消监听事件，与 on 函数相反。取消监听后，不会接收到事件响应。
swiper.off(eventName, listener);eventName: string, swiper 事件listener: Function, 在on函数中传入的监听函数。
swiper = new Swiper();
// 取消监听 swipeChanged 事件
swiper.off('swipeChanged', function (e) {
console.log(e.name + 'fired');
});欢迎大家为 Swiper 共享代码，开始之前，可以了解一下 Swiper 的基本原理，见这篇文章。
TypeScript + Webpack + Jest
├── docs 文档
├── examples 例子
├── index.html 开发用到的 demo
├── src 源码
│ ├── constant.ts 常量定义
│ ├── device.ts 统一设备
│ ├── easing.ts 缓动函数
│ ├── interface.ts 接口定义
│ ├── render.ts render 抽象类
│ ├── renders 支持的六种翻页效果
│ ├── swiper.css 样式文件
│ └── swiper.ts 主文件
└── tests 测试文件
- Fork 代码至自己的代码库，并 clone 到本地；
yarn，安装依赖包，主要是开发时用的；yarn dev，用到的文件是index.html，开发时修改保存后，会实时将 TypeScript 编译为 Javascript；yarn test，运行测试用例，并输出代码覆盖率；- 开发完成后，在 Github 上提交 Pull Request。