快捷導(dǎo)航

APP中javascript+css3實(shí)現(xiàn)下拉刷新效果

更新時(shí)間：2016年01月27日 08:49:11 作者：lihualong

本文給大家分享的是如何在APP中使用javascript結(jié)合CSS3實(shí)現(xiàn)下拉刷新特效的代碼，非常的簡單實(shí)用，有需要的小伙伴可以參考下。

原生app里的數(shù)據(jù)列表都會使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架實(shí)現(xiàn)，那么如何自己編碼實(shí)現(xiàn)類似的效果呢，下面介紹使用原生js+css3實(shí)現(xiàn)的簡單效果。

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">
 下拉刷新數(shù)據(jù)
</div>
<ul>
 <li><a href="#">列表數(shù)據(jù)1</a></li>
 <li><a href="#">列表數(shù)據(jù)2</a></li>
 <li><a href="#">列表數(shù)據(jù)3</a></li>
 <li><a href="#">列表數(shù)據(jù)4</a></li>
 <li><a href="#">列表數(shù)據(jù)5</a></li>
 <li><a href="#">列表數(shù)據(jù)6</a></li>
 <li><a href="#">列表數(shù)據(jù)7</a></li>
 <li><a href="#">列表數(shù)據(jù)8</a></li>
 <li><a href="#">列表數(shù)據(jù)9</a></li>
 <li><a href="#">列表數(shù)據(jù)10</a></li>
 <li><a href="#">列表數(shù)據(jù)11</a></li>
 <li><a href="#">列表數(shù)據(jù)12</a></li>
 <li><a href="#">列表數(shù)據(jù)13</a></li>
 <li><a href="#">列表數(shù)據(jù)14</a></li>
 <li><a href="#">列表數(shù)據(jù)15</a></li>
 <li><a href="#">列表數(shù)據(jù)16</a></li>
 <li><a href="#">列表數(shù)據(jù)17</a></li>
 <li><a href="#">列表數(shù)據(jù)18</a></li>
 <li><a href="#">列表數(shù)據(jù)19</a></li>
 <li><a href="#">列表數(shù)據(jù)20</a></li>
 <li><a href="#">列表數(shù)據(jù)21</a></li>
 <li><a href="#">列表數(shù)據(jù)22</a></li>
 <li><a href="#">列表數(shù)據(jù)23</a></li>
 <li><a href="#">列表數(shù)據(jù)24</a></li>
 <li><a href="#">列表數(shù)據(jù)25</a></li>
 <li><a href="#">列表數(shù)據(jù)26</a></li>
 <li><a href="#">列表數(shù)據(jù)27</a></li>
 <li><a href="#">列表數(shù)據(jù)28</a></li>
 <li><a href="#">列表數(shù)據(jù)29</a></li>
 <li><a href="#">列表數(shù)據(jù)30</a></li>
</ul> 
</div>
<body>
</html>

js邏輯

 var slide = function (option) {
 var defaults={
  container:'',
  next:function(){}
 }
 var start,
   end,
   length,
   isLock = false,//是否鎖定整個(gè)操作
   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)';
  },
  //設(shè)置效果時(shí)間
  setTransition: function (time) {
   obj.style.webkitTransition='all '+time+'s';
   obj.style.transition='all '+time+'s';
  },
  //返回到初始位置
  back: function () {
   fn.translate(0 - offset);
   //標(biāo)識操作完成
   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;
   //標(biāo)識操作進(jìn)行中
   isLock = true;
   isCanDo = true;
   //保存當(dāng)前鼠標(biāo)Y坐標(biāo)
   start = hasTouch ? even.touches[0].pageY : even.pageY;
   //消除滑塊動畫時(shí)間
   fn.setTransition(0);
   loading.innerHTML='下拉刷新數(shù)據(jù)';
  }
  return false;
 }

 //滑動中
 function move(e) {
  if (objparent.scrollTop <= 0 && isCanDo) {
   var even = typeof event == "undefined" ? e : event;
   //保存當(dāng)前鼠標(biāo)Y坐標(biāo)
   end = hasTouch ? even.touches[0].pageY : even.pageY;
   if (start < end) {
    even.preventDefault();
    //消除滑塊動畫時(shí)間
    fn.setTransition(0);
    //移動滑塊
    if((end-start-offset)/2<=150) {
     length=(end - start - offset) / 2;
     fn.translate(length);
    }
    else {
     length+=0.3;
     fn.translate(length);
    }
   }
  }
 }
 //滑動結(jié)束
 function end(e) {
  if (isCanDo) {
   isCanDo = false;
   //判斷滑動距離是否大于等于指定值
   if (end - start >= offset) {
    //設(shè)置滑塊回彈時(shí)間
    fn.setTransition(1);
    //保留提示部分
    fn.translate(0);
    //執(zhí)行回調(diào)函數(shù)
    loading.innerHTML='正在刷新數(shù)據(jù)';
    if (typeof option.next == "function") {
     option.next.call(fn, e);
    }
   } else {
    //返回初始狀態(tài)
    fn.back();
   }
  }
 }
}
slide({container:"#container",next: function (e) {
 //松手之后執(zhí)行邏輯,ajax請求數(shù)據(jù)，數(shù)據(jù)返回后隱藏加載中提示
 var that = this;
 setTimeout(function () {
  that.back.call();
 }, 2000);
}});

代碼不是很多，細(xì)節(jié)還需完善。

您可能感興趣的文章: