原生js手动 实现下拉刷新
所用apitouchstartstouchmovetouchendscrollTop思路:用 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].clientYconsole.log("最初始触摸位置是:",startsY)})//document.getElementById('app').addEventListener( 'touchmove', (e)=> {endY= e.touches[0].clientYconsole.log("移动后的位置是:",endY)})//document.getElementById('app').addEventListener( 'touchend', ()=> {if (endY- startY > 0 && (scroll === 0 || scroll === undefined)) {console.log("下拉刷新了")}}),</script>
