原生js手动 实现下拉刷新
程序员文章站
2022-06-09 16:58:15
...
原生js手动 实现下拉刷新
- 所用api
- touchstarts
- touchmove
- touchend
- scrollTop
思路:用 touchstarts 获取当前触摸时 X轴,Y轴 开始位置, 用 touchmove 获取 移动后的X轴,Y轴 所在位置; 那么利用 touchend 获取到 (移动差 = 移动后的位置 - 初始位置) ， 即可得到当前移动方向 , 若 endY - startsY > 0 即可得知用户实现了下拉动作。 此时 需要 用到scrollTop 获取到 当前盒子滚入的高度, 最初始的滚入高度可能是undefined,因为还么有滚动条的出现。 所以需要在touchend内监听 scrollTop的值，若为0或者是undefined并且 endY-startsY>0 那么则需要刷新当前内容。下面是代码(仅供参考 有什么缺陷 望各位大神指点)
html部分
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body{
min-width: 100%;
min-height: 1000px
}
</style>
</head>
<body>
<div id = "app"></div>
</body>
js部分
<script>
let scroll = event.target.scrollTop
//
document.getElementById('app').addEventListener( 'touchstart', (e)=> {
startY = e.touches[0].clientY
console.log("最初始触摸位置是:",startsY)
})
//
document.getElementById('app').addEventListener( 'touchmove', (e)=> {
endY= e.touches[0].clientY
console.log("移动后的位置是:",endY)
})
//
document.getElementById('app').addEventListener( 'touchend', ()=> {
if (endY- startY > 0 && (scroll === 0 || scroll === undefined)) {
console.log("下拉刷新了")
}
}),
</script>
上一篇： 使用CSS3和Javascript单击时的按钮涟漪效果
下一篇： 手动实现动态数组(java)