移动端下拉刷新头实现原理及代码实现
栏目: JavaScript · 发布时间: 5年前
内容简介:实现下拉刷新主要分为三步:HTML代码JS代码实现
下拉刷新实现原理
实现下拉刷新主要分为三步:
- 监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY;
- 监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于某个临界值时,显示下拉刷新头,并将页面的overflow属性,设置为false;
- 监听原生touchend事件,若此时元素滑动已经最大值,则进行刷新操作,操作结束后,将页面的overflow属性,设置为auto。
代码实现
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>下拉刷新</title> <style type="text/css"> html,body, header,p,main,span,ul,li { margin: 0; padding: 0; } #refreshContainer li { background-color: rgba(5, 143, 62, 0.603); margin-bottom: 1px; padding: 30px 10px; } .refreshText { position: absolute; width: 100%; line-height: 80px; text-align: center; left: 0; top: 0; transform: translateY(-80px); } </style> </head> <body> <div class="parent"> <p class="refreshText"></p> <ul id="refreshContainer"> <li>000</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> <li>777</li> <li>888</li> <li>999</li> </ul> </div> </body> </html>
JS代码实现
<script type="text/javascript"> window.onload = function () { let container = document.querySelector('#refreshContainer'); let refreshText = document.querySelector('.refreshText'); let parent = document.querySelector('.parent'); let startY = 0; //手指触摸最开始的Y坐标 let endY = 0; //手指结束触摸时的Y坐标 let flag = false; //下拉刷新是否达到了临界值 parent.addEventListener('touchstart', function (e) { startY = e.touches[0].pageY; }); parent.addEventListener('touchmove', function (e) { if (isTop() && (e.touches[0].pageY - startY) > 50) { flag = true; document.body.style.overflow='hidden'; refreshText.style.height = "80px"; parent.style.transform = "translateY(80px)"; parent.style.transition = "all ease 0.5s"; refreshText.innerHTML = "释放立即刷新..."; } }); //松开手指 parent.addEventListener('touchend', function (e) { if (isTop() && flag) { refreshText.innerHTML = "正在刷新..."; //进行更新操作,更新结束后,结束下拉刷新 setTimeout(function () { parent.style.transform = "translateY(0)"; document.body.style.overflow = 'auto'; }, 2000); } }); //scrollTop没有滚过 function isTop() { let t = document.documentElement.scrollTop || document.body.scrollTop; return t === 0 ? true : false; } } </script>
注意 body 的 overflow 属性设置。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- angular 实现下拉列表组件
- Android中ListView下拉刷新的实现
- iOS 下拉刷新组件原理及简单实现
- Ajax+Servlet实现无刷新下拉联动效果
- React Native 实现自定义下拉刷新组件
- ios 关于朋友圈、下拉列表的实现总结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C语言程序开发范例宝典
2010-1 / 59.00元
《C语言程序开发范例宝典》全面介绍了应用C语言进行开发的各种技术和技巧,全书共分12章,内容包括基础知识、指针、数据结构、算法、数学应用、文件操作、库函数应用、图形图像、系统调用、加解密与安全性、游戏、综合应用等。全书共提供300个实例,每个实例都突出了其实用性。 《C语言程序开发范例宝典》既可作为C程序的初学者学习用书,也可作为程序开发人员、相关培训机构老师和学生的参考用书。一起来看看 《C语言程序开发范例宝典》 这本书的介绍吧!