移动端下拉刷新原理和实例

移动端的下拉刷新是一个很常见的功能，也有许多开源库实现了这个功能，不过为了学习，还是先自己写一个例子学习一下。其中用到了一些touch事件和一些DOM属性CSS3属性。直接上代码，代码里面有注释。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Document</title><style type="text/css">html,body,header,div,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>
</head><body><main class="parent"><p class="refreshText"></p><ul id="refreshContainer"><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><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，列表父容器的domlet 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>
</body></html>

其中用到了CSS3中的transform和animate。因为既然都是移动端了，这些东西基本上都支持了。
具体看代码吧，注释也有。本文只是讲解原理，后续将会对其进行封装成一个对象。方便直接调用。

移动端下拉刷新原理和实例相关推荐

php wap页下拉刷新代码,js实现的移动端下拉刷新功能代码实例
[JavaScript] 纯文本查看复制代码var scroll = document.querySelector('.scroll'); var outerScroller = document. ...
html下拉刷新原理,科技常识：移动端下拉刷新头实现原理及代码实现
科技常识:移动端下拉刷新头实现原理及代码实现 2021-05-24 21:23:20 • 互联网今天小编跟大家讲解下有关移动端下拉刷新头实现原理及代码实现 ,相信小伙伴们对这个话题应该有所关注吧,小 ...
html下拉刷新原理,下拉刷新的基本原理
下拉刷新的基本原理大部分的下拉刷新控件,都是用contentInset实现的.默认情况下,如果一个UIScrollView的左上角在导航栏的正下方,那么它的contentInset是64,而cont ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹
此方法在安卓6的自带下拉刷新的APP内无效. 做移动app项目时,用的是app内嵌webview的方法,遇到问题. 在安卓6中,app原生自带下拉刷新,与界面内的下滑冲突. 开始考虑通过在touchm ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
移动端下拉刷新，兼容ios，Android及微信浏览器
先看一下效果图下拉效果的样子参考的新浪微博,滚动加载是ydui的滚动加载组件因为滚动加载使用的ydui的组件,我这里便不再累述在线体验点这里首先分析下拉刷新是怎么实现的 1.页面滚动到顶部时, ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
移动端下拉刷新infinitescroll
使用的是infinitescroll 移动端手机下拉刷新数据第一步:在serviceList.html导入 <script src="/js/jquery.infinitescrol ...

移动端下拉刷新原理和实例

移动端下拉刷新原理和实例相关推荐

最新文章

热门文章