Vue单页上滑切页效果

背景，移动端的h5项目，页面之间都是正常点击切换，金主爸爸要求某一页交互效果是：上滑切换到下一页，而且下一页会根据逻辑显示不同的页面（不同的页面，不是同一个页面不同的内容）。所以这种情况就不适用于使用引入组件，而是可以通过vue过渡动画来实现。

需要上滑的页面start.vue：

// 首先实现上滑事件
data () {
    return {
      startX: 0, // 鼠标开始点击的x坐标
      startY: 0 
    },
methods: {
 // 给目标添加事件，处理兼容
  addHandler (element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false)
      } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler)
      } else {
        element['on' + type] = handler
      }
    },
// 具体的滑动处理
//（此处只需要处理上滑事件，所以处理较简单，还可以进行封装，处理各种滑动事件）
  handleTouchEvent (event) {
      switch (event.type) {
        case 'touchstart':
          this.startX = event.touches[0].pageX
          this.startY = event.touches[0].pageY
          break
        case 'touchend':
          var spanX = event.changedTouches[0].pageX - this.startX
          var spanY = event.changedTouches[0].pageY - this.startY
          // console.log('spanY', spanY)
          if (spanY < -30) { // 向上
            if (this.userInfo && this.userInfo.firstJoin) {
              this.$router.push('/authen')
            } else {
              this.$router.push('/home')
            }
          }
          if (Math.abs(spanX) > Math.abs(spanY)) {
            // 认定为水平方向滑动
          } else {
            // 认定为垂直方向滑动
          }
          break
        case 'touchmove':
          // 阻止默认行为
          // event.preventDefault()
          break
      }
},
mounted () {
// 给被滑动对象添加事件
    let element = document.getElementById('start')
    this.addHandler(element, 'touchstart', this.handleTouchEvent)
    this.addHandler(element, 'touchend', this.handleTouchEvent)
    this.addHandler(element, 'touchmove', this.handleTouchEvent)
}

上滑事件处理好了，现在已经能够通过上滑跳转到下一页了。但是上滑效果还是得有，不然就显得很奇怪了。

简单实现上滑动画效果：
start.vue:

<template>
<transition name="scaleUp">
  <div class="page" id="start">
    // ......
   <p>上滑切换页面</p>
  </div>
</transition>
</template>

然后给transition添加动画：

.scaleUp-enter-active, .scaleUp-leave-active {
  transition: all 0.3s linear;
 }
.scaleUp-leave-active {
  transform: translateY(-100%);
}

然后就简单的完成想要的效果了，线上兼容木有问题哦～
效果demo，建议微信扫码：

h5上滑切页.png