滑屏应用开发

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)
  }
})

业界判断手势动作的插件

滑屏过渡动画

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 版本
滑屏应用例子源码无依赖版本

仿抖音滑屏应用开发