首页 > 代码库 > 手机端轻应用模拟原生的下拉刷新效果（JavaScript）
手机端轻应用模拟原生的下拉刷新效果（JavaScript）
方案一：使用iscoll等有下拉功能的框架。
分析：因为项目的结构已经基本完成，再使用框架，会与原来的结构互相影响；
方案二：用JavaScript、Jquery写。
分析：可能没有直接使用框架的效果好，但可以尽量使效果贴近原生。
综合考虑，采用方案二。
/////////////////////////////////////////////////////////////////////////////////////////////////
参考博客：http://www.cnblogs.com/tqlin/archive/2013/03/04/2942789.html
1、index.html
refreshFeedback：刷新状态提示语
loading：箭头和loading的gif图
tasks：刷新的内容
<div id="wrapper"> <div id="list"> <div id="refreshFeedback" style="width:100%;height:36px;position:absolute;z-index:9;top:40px;"><p></p></div> <div> <div id="loading" style="width:92%;height:70px;position:absolute;z-index:0;top:-60px"> <p></p> </div> <div class="list-group" id="tasks"> <!-- 内容动态生成--> </div> </div> </div></div>
2、app.js
searchTasks（）：刷新tasks内容的函数
//返回角度 function GetSlideAngle(dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI; }//根据起点和终点返回方向 1：向上，2：向下，0：未滑动 function GetSlideDirection(startX, startY, endX, endY) { var dy = startY - endY; var dx = endX - startX; var result = 0; //如果滑动距离太短 if (Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } var angle = GetSlideAngle(dx, dy); if (angle >= 45 && angle < 135) { result = 1; } else if (angle >= -135 && angle < -45) { result = 2; } else { return result; } return result; } var startX, startY; var judge =0; document.getElementById("list").addEventListener(‘touchstart‘, function (ev) { ev = ev || window.event; //兼容IE startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; //初始化动画时间 $("#tasks").css("transition","0s"); $("#loading").css("transition","0s"); //初始化向下的箭头 $("#loading p").css("transform","rotate(0deg)"); $("#loading p").html(‘<span class="glyphicon glyphicon-arrow-down"></span>‘); }, false); document.getElementById("list").addEventListener(‘touchmove‘, function (ev) { judge = 0; ev = ev || window.event; //兼容IE var shift=event.touches[0].pageY-startY; //手指在屏幕上划动的距离 var realShift=shift/2; //元素实际位移的距离 if( $(‘#wrapper #list‘).scrollTop()>0){ judge = 1; //说明滚动条不在顶部，不需要触发下拉刷新 return; } else{ if(shift>0){ //只有滚动条在顶部，且下划时，才阻止滚动的默认行为（不影响滚动条的正常行为） event.preventDefault(); if(shift<260){ //移到一定位置就不移了 $("#loading").css("transform","translateY("+realShift+"px"+")"); $("#tasks").css("transform","translateY("+realShift+"px"+")"); } if(shift>=90){ //移到一定位置箭头垂直翻转 $("#loading p").css("transform","rotate(-180deg)"); } else{ $("#loading p").css("transform","rotate(0deg)"); } } } }, false); //手指离开屏幕，元素回到原位 document.getElementById("list").addEventListener(‘touchend‘, function (ev) { ev = ev || window.event; //兼容IE var endX, endY; endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; var direction = GetSlideDirection(startX, startY, endX, endY); switch (direction) { case 0: break; case 1: //向上 break; case 2: //向下 if(judge==1){ return; } else{ $("#loading").css("transition","0.2s"); $("#tasks").css("transition","0.2s"); //还原的时候稍微慢一些 $("#loading").css("transform","translateY("+0+"px"+")"); $("#tasks").css("transform","translateY("+0+"px"+")"); if ((endY-startY)>90){ //$("#tasks").empty(); $("#loading p").html(‘<img src="http://www.mamicode.com/img/loading2.gif">‘);//loading的gif图片 $("#loading").css("transition-delay","0.8s");//延迟0.8秒，模拟“思考”的效果 $("#tasks").css("transition-delay","0.8s"); whichPage = dataGroupPage[whichMemory]; whichPage.pageNo = 1; searchTasks(dataGroupPage[whichMemory], memory[whichMemory]).then(function(data) { if(data=http://www.mamicode.com/=1){"#refreshFeedback p").html("刷新成功"); } else{ $("#refreshFeedback p").html("刷新失败"); } $("#refreshFeedback").css("display","block").hide().delay(800).fadeIn().delay(1200).fadeOut(); }); } } break; default: } }, false);3、app.css
#loading p{ width:100%; position:absolute; bottom:30px; padding:0px; margin-left:auto; margin-right:auto; text-align:center; transition:0.2s; font-size: larger; color:grey;}#loading p img{ width:20px; height:20px;}#refreshFeedback{ display: none;}#refreshFeedback p{ margin:auto; text-align: center; line-height: 36px; color:white;}4、另外，还有下滑翻页的部分
$(‘#wrapper #list‘).bind(‘scroll‘, function () { if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { //如果上一次刷新得到的数据数小于一次刷新默认得到的数据数，说明这次刷新之后数据已经加载完毕，再滑动不再向数据库请求数据。 if(lastPageSize<dataGroupPage[whichMemory].pageSize){ return; } else{ dataGroupPage[whichMemory].pageNo += 1; searchTasks(dataGroupPage[whichMemory], memory[whichMemory]); } }});
手机端轻应用模拟原生的下拉刷新效果（JavaScript）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。