这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新（原理和代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
移动端的下拉刷新是一个很常见的功能，也有许多开源库实现了这个功能，不过为了学习，还是先自己写一个例子学习一下。其中用到了一些touch事件和一些DOM属性CSS3属性。直接上代码，代码里面有注释。
Document html, body, header, p, main, p, span, ul, li { margin: 0; padding: 0; } #refreshContainer li { background-color: #eee; margin-bottom: 1px; padding: 20px 10px; } .refreshText { position: absolute; width: 100%; line-height: 50px; text-align: center; left: 0; top: 0; transform: translateY(-50px); }window.onload = function(){ //1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom let container = document.querySelector('#refreshContainer'); let refreshText = document.querySelector('.refreshText'); let parent = document.querySelector('.parent'); //2.定义一些需要常用的变量 let startY = 0;//手指触摸最开始的Y坐标 let endY = 0;//手指结束触摸时的Y坐标 //3.给列表dom监听touchstart事件,得到起始位置的Y坐标 parent.addEventListener('touchstart',function(e){ startY = e.touches[0].pageY; }); //4.给列表dom监听touchmove事件，当移动到一定程度需要显示上面的文字 parent.addEventListener('touchmove',function (e) { if(isTop() && (e.touches[0].pageY-startY) > 0){ console.log('下拉了'); refreshText.style.height = "50px"; parent.style.transform = "translateY(50px)"; parent.style.transition = "all ease 0.5s"; refreshText.innerHTML = "释放立即刷新..."; } }); //5.给列表dom监听touchend事件，此时说明用户已经松开了手指，应该进行异步操作了 parent.addEventListener('touchend',function (e) { if(isTop()){ refreshText.innerHTML = "正在刷新..."; setTimeout(function(){ parent.style.transform = "translateY(0)"; console.log('成功刷新'); },2000) } return; }) function isTop(){ var t = document.documentElement.scrollTop||document.body.scrollTop; return t === 0 ? true : false; } }
- 111
- 222
- 333
- 444
- 555
- 111
- 222
- 333
- 444
- 555
- 111
- 222
- 333
- 444
- 555
登录后复制
其中用到了CSS3中的transform和animate。因为既然都是移动端了，这些东西基本上都支持了。
具体看代码吧，注释也有。本文只是讲解原理，后续将会对其进行封装成一个对象。方便直接调用。
相关文章推荐：
vue.js移动端实现上拉加载下拉刷新
vue.js移动端实现上拉加载下拉刷新
以上就是html5实现移动端下拉刷新（原理和代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3124213.html
