页面的滚动区域本来是用的插件vue-scroller，但是由于在一些低端安卓机中页面略有卡动，可能是GPU不给力造成的，这里尝试用原生的overflow: auto; 来测试一下滚动效果，发现效果不错，但是在ios设备中就发现了了滚动没有惯性很死板的体验，这里可以在滚动容器中写一行css属性-webkit-overflow-scrolling: touch;，这样就有原生的滚动体验啦，接下来就差一个下拉刷新的效果了，没有找到现成的轮子，这里就自己开撸
如何实现
- 当容器的scrollTop为0的时候，使用transform: translateY来模拟
- 检测下拉的高度当达到某一固定值的时候，释放手指，调用回调函数实现下拉刷新
着手实现
既然是下拉我们肯定需要监听touchstart、touchmove、touchend三个dom事件
touchstart
el.addEventListener('touchstart', e => {
if (el.scrollTop !== 0) {
return
}
beginPagY = e.touches[0].pageY
e.preventDefault()
})用于记录手指点按屏幕时候的位置，为了后续translateY的值计算做准备
touchstartmove
el.addEventListener('touchmove', e => {
if (el.scrollTop !== 0) {
return
}
const pageY = e.touches[0].pageY
const distance = currentPos = pageY - beginPagY
if (distance < 0 || distance > maxTranslateY) {
// 上拉的和超过最大限定高度时候不做任何处理
return;
}
if (distance > 60) {
iconEl.classList.add('active')
} else {
iconEl.classList.remove('active')
}
e.preventDefault()
el.style.transform = `translateY(${distance}px)`
})touchmove主要是根据手指下拉的距离不断的修改container的translate的值来达到效果, 同时记录当前下拉的distance，用于松手是判断是否触发下拉刷新的效果； 同时在模拟下拉效果的时候要阻止系统默认事件e.preventDefault()
touchend
let clear = () => {
this.isShowLoading = false
el.style.transform = `translateY(0)`
setTimeout(() => {
el.style.transition = ``
}, 200)
}
el.addEventListener('touchend', () => {
el.style.transition = `.2s`
if (currentPos >= 60) {
this.isShowLoading = true
el.style.transform = `translateY(30px)`
callback && callback(() => {
clear()
})
return
}
clear()
})touchend 主要是用来松手时是否执行下拉刷新的效果， 当currentPos达到预先设定的值的时候就触发回调函数，这里设置transition来增加动画效果
最终效果
所有代码
Document
下拉刷新
假装是个loading图标
{{item}}