你的位置:首页 > Java教程

[Java教程]手机端轻应用模拟原生的下拉刷新效果(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;background-color:orange;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 ></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]);    }  }});