【转】html5实现移动端下拉刷新(原理和代码)
2019-01-31 17:16
183 查看
这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下。其中用到了一些touch事件和一些DOM属性CSS3属性。直接上代码,代码里面有注释。
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <style type="text/css"> 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); } </style>
<main class="parent"> <p class="refreshText"></p> <ul id="refreshContainer"> <li>111</li> 4000 <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> </main> <script type="text/javascript"> 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; } } </script>
其中用到了CSS3中的transform和animate。因为既然都是移动端了,这些东西基本上都支持了。
具体看代码吧,注释也有。本文只是讲解原理,后续将会对其进行封装成一个对象。方便直接调用。
相关文章推荐:
vue.js移动端实现上拉加载下拉刷新
移动端下拉刷新,iScroll.js用法(转载)_html/css_WEB-ITnose
以上就是html5实现移动端下拉刷新(原理和代码)的详细内容,更多请关注php中文网其它相关文章!
相关文章推荐
- vue移动端下拉刷新和上拉加载的实现代码
- 移动端HTML5实现文件上传功能【附代码】
- 浅谈Linux下CPU利用率和CPU负载及其代码实现原理
- HTML5 手势检测原理和实现
- JSP中实现系统登录后的退出原理及代码
- RANSAC(随机采样一致算法)原理及openCV代码实现
- 基于html5+java实现大文件上传实例代码
- Html5 FileReader实现即时上传图片功能实例代码
- Android最便捷banner轮播图实现原理及代码
- 根据Merge Sort原理, 自己实现的归并排序算法+详细注释+代码(C#,C/C++) [分享]
- NMS非极大值抑制的原理与代码实现
- HTML5游戏实战(2):90行代码实现捕鱼达人
- Objective-c 下拉刷新,上拉加载实现原理
- 算法:集合的划分原理及代码实现
- Java NIO原理图文分析及代码实现
- 分享《深度学习与计算机视觉 算法原理、框架应用与代码实现.pdf》PDF高清完整版
- Graham扫描法求点集凸包的原理及代码实现
- HTML5离线存储原理及实现
- KMP的原理和代码实现(详细注释|参考多个博客总结|可作为模板)
- [原创]桓泽学音频编解码(4):MP3 和 AAC 中反量化原理,优化设计与参考代码中实现