背景厂榛，移動端的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
