html5 界面触摸滑动效果,前端HTML5移动端实现原生上滑框效果

mounted () {

let distance = 0, startPageY = 0, endPageY = 0, curHeight = 0;

const upglideboxDom = this.$refs['upglidebox']

upglideboxDom.addEventListener('touchstart', e => {

startPageY = e.changedTouches[0].pageY

})

upglideboxDom.addEventListener('touchend', e => {

// 记录上滑框的当前高度

curHeight = distance;

})

const boxHeight = upglideboxDom.clientHeight

const boxTop = parseFloat(upglideboxDom.style.top.replace('px', ''))

const maxScrollheight = boxHeight - (document.documentElement.clientHeight - boxTop)

// let isScrollMax = false

upglideboxDom.addEventListener('touchmove', e => {

// 屏蔽盒子默认的滑动行为

e.preventDefault()

endPageY = e.changedTouches[0].pageY

distance = startPageY - endPageY + curHeight

// 往下滑就瞬间返回初始位置

if (distance < 0) {

distance = 0

}

// 最多只能让盒子滑出贴近底部

if (distance > maxScrollheight) {

distance = maxScrollheight

}

this.upglideboxStyle = `

top:400px;

transform: translateY(${-distance}px);

`;

}, { passive: false })

}