滑屏应用开发

• JavaScript 和 CSS3 来实现单页面应用的滑屏效果，包括上下滑屏、左右滑屏，以及局部元素的滑动切换效果

• 至少要掌握主流滑屏组件（如 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 ,
})

实现一个简单的 swiper

• 判断用户的手势动作
• 根据手势动作执行相应滑屏过渡动画

先在移动端体验以下三个例子

• 滑屏应用例子 swiper.js 版本
• 滑屏应用例子 hammer.js 版本
• 滑屏应用例子 无依赖版本

手势动作判断

• 瞬间的上下滑动（滑动的始末位置、时间间隔、滑动速度）
  若满足必定的速度则代表用户是果断切换上下屏的动作，反之，则是犹豫保留在当前屏的动作。
• 按住拖拽滑动

var _this = this
var drag = false
var y0 = 0
var deltaY = 0
var time0 = 0

this.$swiper.on( touchstart , function (ev) {
  drag = _this.$swiper
  y0 = ev.touches[0].pageY
  time0 = new Date()  
})

this.$swiper.on( touchend , function (ev) {
  var interval = new Date() - time0
  drag = false
  // 拖拽完成后，判断移动方向、移动速度和移动距离等
  // 若划动速度满足，则执行上划或下划过渡动画。
  // 若划动速度不满足，则判断是否划动距离是否大于阈值(如 Swiper 容器的高度的一半)，若大于则执行上划或下划过渡画面，反之回到当前活跃块。
  _this.panEnd(deltaY, deltaY / interval)
})

this.$swiper.on( touchmove , function (ev) {
  if (drag) {
    deltaY = ev.touches[0].pageY - y0
    // 设置 .swiper-wrapper 按住拖拽的位移。
    _this.pan(deltaY)
  }
})

业界判断手势动作的插件

• hammer.js
• zepto

滑屏过渡动画

• CSS3
• JavaScript 动画

假设当前活跃块的索引为 activeIndex，将其与 swiper 容器的高度相乘并取反，可得到 .swiper-wrapper 的偏移量，然后设置适当的 CSS transition-duration 属性即可轻松实现过渡动画效果：

this.translate = -(this.activeIndex * this.swiperHeight)
this.$swiperWrapper.css({
   transform :  translate3d(0,  + this.translate + px, 0) ,
   transition :  transform  + 0.3 + s 
})

若想保证一个过渡完成后，才能接收用户的下一个操作，则可以增加 animating 属性。动画过渡前就将其设置为 true，然后在 .swiper-wrapper 的 transitionend 事件触发时再将其设置为 false：

this.$swiperWrapper.on( transitionend , function(ev) {
  if (ev.propertyName ===  transform ) {
    _this.animating = false
  }
})

源码

• 滑屏应用例子源码 Swiper 版本
• 滑屏应用例子源码 hammer.js 版本
• 滑屏应用例子源码 无依赖版本