手机端轻应用模拟原生的下拉刷新效果(JavaScript)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机端轻应用模拟原生的下拉刷新效果(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="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==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)的主要内容,如果未能解决你的问题,请参考以下文章