原生js手动实现下拉刷新

最新推荐文章于 2024-03-21 21:45:17 发布

M--min

最新推荐文章于 2024-03-21 21:45:17 发布

阅读量437

点赞数

分类专栏：原生实现下拉刷新文章标签： js javascript vue.js

本文链接：https://blog.csdn.net/M_xi_min/article/details/115615017

版权

原生实现下拉刷新专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

M--min

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js手动实现下拉刷新

原生js手动实现下拉刷新所用apitouchstartstouchmovetouchendscrollTop思路:用 touchstarts 获取当前触摸时 X轴,Y轴开始位置, 用 touchmove 获取移动后的X轴,Y轴所在位置; 那么利用 touchend 获取到 (移动差 = 移动后的位置 - 初始位置) ，即可得到当前移动方向 , 若 endY - startsY > 0 即可得知用户实现了下拉动作。此时需要用到scrollTop 获取到当前盒子
复制链接

扫一扫