摘要:代码实现代码下拉刷新代码实现手指触摸最开始的坐标手指结束触摸时的坐标下拉刷新是否达到了临界值释放立即刷新松开手指正在刷新进行更新操作,更新结束后,结束下拉刷新没有滚过注意的属性设置。
下拉刷新实现原理
实现下拉刷新主要分为三步:
监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY;
监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于某个临界值时,显示下拉刷新头,并将页面的overflow属性,设置为false;
监听原生touchend事件,若此时元素滑动已经最大值,则进行刷新操作,操作结束后,将页面的overflow属性,设置为auto。
代码实现HTML代码
下拉刷新
- 000
- 111
- 222
- 333
- 444
- 555
- 666
- 777
- 888
- 999
JS代码实现
注意 body 的 overflow 属性设置。
谢谢您花费宝贵的时间阅读本文,如果本文给了您一点帮助或者是启发,那么不要吝啬你的赞和Star哈,您的肯定是我前进的最大动力。https://github.com/YvetteLau/...
关注小姐姐的公众号,和小姐姐一起学前端。文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/109042.html
摘要:移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下。 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下。其中用到了一些touch事件和一些DOM属性CSS3属性。直接上代码,代码里面有注释。 Document ...
摘要:移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下。 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下。其中用到了一些touch事件和一些DOM属性CSS3属性。直接上代码,代码里面有注释。 Document ...
阅读 3196·2021-09-22 15:58
阅读 1696·2019-08-30 14:17
阅读 1695·2019-08-28 18:05
阅读 1463·2019-08-26 13:33
阅读 656·2019-08-26 12:20
阅读 580·2019-08-26 12:18
阅读 3175·2019-08-26 11:59
阅读 1374·2019-08-26 10:36