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