欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生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>