DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> APP中javascript+css3實現下拉刷新效果
APP中javascript+css3實現下拉刷新效果
編輯:關於JavaScript     

原生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);
}});

代碼不是很多,細節還需完善。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved