APP中javascript+css3实现下拉刷新效果

时间：2021-05-28

原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。

html布局

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>test</title><style type="text/css" media="screen"> body{margin: 0;} ul{list-style: none;padding: 0;} li{height: 30px;border-bottom: 1px solid #ddd;line-height: 30px;padding-left: 10px;} .scroller .loading{height: 60px;line-height: 60px;text-align: center;width: 100%;background-color: #f1f1f1;} .scroller{-webkit-overflow-scrolling:touch;}</style> </head> <body > <div id="container" class="scroller" ><div class="loading"> 下拉刷新数据</div><ul> <li><a href="#">列表数据1</a></li> <li><a href="#">列表数据2</a></li> <li><a href="#">列表数据3</a></li> <li><a href="#">列表数据4</a></li> <li><a href="#">列表数据5</a></li> <li><a href="#">列表数据6</a></li> <li><a href="#">列表数据7</a></li> <li><a href="#">列表数据8</a></li> <li><a href="#">列表数据9</a></li> <li><a href="#">列表数据10</a></li> <li><a href="#">列表数据11</a></li> <li><a href="#">列表数据12</a></li> <li><a href="#">列表数据13</a></li> <li><a href="#">列表数据14</a></li> <li><a href="#">列表数据15</a></li> <li><a href="#">列表数据16</a></li> <li><a href="#">列表数据17</a></li> <li><a href="#">列表数据18</a></li> <li><a href="#">列表数据19</a></li> <li><a href="#">列表数据20</a></li> <li><a href="#">列表数据21</a></li> <li><a href="#">列表数据22</a></li> <li><a href="#">列表数据23</a></li> <li><a href="#">列表数据24</a></li> <li><a href="#">列表数据25</a></li> <li><a href="#">列表数据26</a></li> <li><a href="#">列表数据27</a></li> <li><a href="#">列表数据28</a></li> <li><a href="#">列表数据29</a></li> <li><a href="#">列表数据30</a></li></ul> </div><body></html>

js逻辑

var slide = function (option) { var defaults={ container:'', next:function(){} } var start, end, length, isLock = false,//是否锁定整个操作 isCanDo = false,//是否移动滑块 isTouchPad = (/hp-tablet/gi).test(navigator.appVersion), hasTouch = 'ontouchstart' in window && !isTouchPad; var obj = document.querySelector(option.container); var loading=obj.firstElementChild; var offset=loading.clientHeight; var objparent = obj.parentElement; var fn = { //移动容器 translate: function (diff) { obj.style.webkitTransform='translate3d(0,'+diff+'px,0)'; obj.style.transform='translate3d(0,'+diff+'px,0)'; }, //设置效果时间 setTransition: function (time) { obj.style.webkitTransition='all '+time+'s'; obj.style.transition='all '+time+'s'; }, //返回到初始位置 back: function () { fn.translate(0 - offset); //标识操作完成 isLock = false; }, addEvent:function(element,event_name,event_fn){ if (element.addEventListener) { element.addEventListener(event_name, event_fn, false); } else if (element.attachEvent) { element.attachEvent('on' + event_name, event_fn); } else { element['on' + event_name] = event_fn; } } }; fn.translate(0-offset); fn.addEvent(obj,'touchstart',start); fn.addEvent(obj,'touchmove',move); fn.addEvent(obj,'touchend',end); fn.addEvent(obj,'mousedown',start) fn.addEvent(obj,'mousemove',move) fn.addEvent(obj,'mouseup',end) //滑动开始 function start(e) { if (objparent.scrollTop <= 0 && !isLock) { var even = typeof event == "undefined" ? e : event; //标识操作进行中 isLock = true; isCanDo = true; //保存当前鼠标Y坐标 start = hasTouch ? even.touches[0].pageY : even.pageY; //消除滑块动画时间 fn.setTransition(0); loading.innerHTML='下拉刷新数据'; } return false; } //滑动中 function move(e) { if (objparent.scrollTop <= 0 && isCanDo) { var even = typeof event == "undefined" ? e : event; //保存当前鼠标Y坐标 end = hasTouch ? even.touches[0].pageY : even.pageY; if (start < end) { even.preventDefault(); //消除滑块动画时间 fn.setTransition(0); //移动滑块 if((end-start-offset)/2<=150) { length=(end - start - offset) / 2; fn.translate(length); } else { length+=0.3; fn.translate(length); } } } } //滑动结束 function end(e) { if (isCanDo) { isCanDo = false; //判断滑动距离是否大于等于指定值 if (end - start >= offset) { //设置滑块回弹时间 fn.setTransition(1); //保留提示部分 fn.translate(0); //执行回调函数 loading.innerHTML='正在刷新数据'; if (typeof option.next == "function") { option.next.call(fn, e); } } else { //返回初始状态 fn.back(); } } }}slide({container:"#container",next: function (e) { //松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示 var that = this; setTimeout(function () { that.back.call(); }, 2000);}});

代码不是很多，细节还需完善。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章