# 滑屏应用开发
滑屏应用开发的能力可以定义为：
利用 JavaScript 和 CSS3 来实现单页面应用的滑屏效果，包括上下滑屏、左右滑屏，以及局部元素的滑动切换效果。
滑屏 H5 应用在国内是异常火爆的一种内容展示交互形式，被广泛用于各类线上营销活动场景中。
滑屏应用开发要求我们：
- 至少要掌握主流滑屏组件（如 Swiper）的具体用法
- 能不依赖已有组件实现简易的滑屏效果，了解滑屏的技术细节
上图为基础的滑屏页面效果示例。
# 善用利器
在平时工作过程中，考虑到项目的紧迫性和实现成本，我们大多数时候会使用业界已有滑屏组件，如：
- Swiper：Most modern mobile touch slider with hardware accelerated transitions.
其它更多滑屏组件的选择可查阅《awesome-javascript》。
基于 Swiper 组件，只需数行代码即可创建一个基础的「滑屏应用」，以上下滑屏为例:
HTML (Jade)：约定的 HTML 结构
div.swiper-container
div.swiper-wrapper
div.swiper-slide
div.swiper-slide
div.swiper-slide
@前端进阶之旅: 代码已经复制到剪贴板
CSS (SCSS) ：指定滑屏的尺寸为视窗大小
.swiper-container {
width: 100vw;
height: 100vh;
}
@前端进阶之旅: 代码已经复制到剪贴板
JavaScript：初始化为竖直方向上的滑屏应用
new Swiper('.swiper-container', {
direction: 'vertical',
})
@前端进阶之旅: 代码已经复制到剪贴板
善用成熟的组件可以让我们免去从零实现滑屏效果的成本，并能保证开发速度和稳定性，解决 80% 的应用场景，但缺点是定制化成本较高，另外就是代码冗余，有时候你只用了它 20% 的功能，但却要加载其 100% 的体积。当然，如果我们的滑屏应用场景不需要做定制化效果，也不用太在意那几十 KB 的体积的时候，利用业界成熟组件是首选方式。
# 知其所以然
善用利器，我们只做到了知其然。有些时候现有的滑屏组件不一定能满足个性化的业务需求，我们不得不去做二次开发，甚至需要根据个性化需求重新开发一款适用当前应用场景的滑屏组件，这就要求我们知其所以然。
作为示例，接下来我们探索下如何实现一个简单的 swiper。
我们将滑屏应用的实现分为两大部分：
- 判断用户的手势动作
- 根据手势动作执行相应滑屏过渡动画
为了更易理解，大家可以先在移动端体验以下三个例子，然后再阅读下面内容。
