背景，移动端的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
