jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理

更新時間：2015年08月10日 09:50:18 作者：拎壺充

很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實現(xiàn)上拉刷新下拉加載更多頁面的呢？下面小編通過下面內容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理，需要的朋友可以參考下

很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果,網(wǎng)上提供了實現(xiàn)這種效果的第三方類(詳情請見MJRefresh和EGOTableViewPullRefresh),用起來很方便，但是閑暇之余,我們可以思考下,這種效果實現(xiàn)的原理是什么,我以前說過,只要是動畫都是騙人的,只要不是硬件問題大部分效果都能在系統(tǒng)UI的基礎上做出來.
下面通過jQuery手機端上拉下拉刷新頁面代碼，很像QQ空間客戶端或者微信下拉刷新頁面特效代碼。
請看下面效果圖：

在線預覽源碼下載

html代碼：

<div id="wrapper">
 <ul>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
 </ul>
 </div>
 <script>
 for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
  document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
 }
 refresher.init({
  id: "wrapper",//<------------------------------------------------------------------------------------┐
  pullDownAction: Refresh,
  pullUpAction: Load
 });
 var generatedCount = ;
 function Refresh() {
  setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
  var el, li, i;
  el = document.querySelector("#wrapper ul");
  el.innerHTML = '';
  for (i = ; i < ; i++) {
   li = document.createElement('li');
   li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
   el.insertBefore(li, el.childNodes[]);
  }
  wrapper.refresh();/****remember to refresh after action completed！ ---yourId.refresh(); ----| ****/
  for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
   document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
  }
  }, );
 }
 function Load() {
  setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
  var el, li, i;
  el = document.querySelector("#wrapper ul");
  for (i = ; i < ; i++) {
   li = document.createElement('li');
   li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
   el.appendChild(li, el.childNodes[]);
  }
  wrapper.refresh();/****remember to refresh after action completed！?。?---id.refresh(); --- ****/
  for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
   document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
  }
  }, );
 }
 </script>

下拉刷新和上拉加載更多原理詳解，具體介紹通過代碼分析。

代碼如下：

// 下拉刷新的原理 
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView 
{ 
 if (scrollView.contentOffset.y < - 100) { 
  
 [UIView animateWithDuration:1.0 animations:^{ 
  
  // frame發(fā)生偏移,距離頂部150的距離(可自行設定) 
  self.tableView.contentInset = UIEdgeInsetsMake(150.0f, 0.0f, 0.0f, 0.0f); 
 } completion:^(BOOL finished) { 
  
  /** 
  * 發(fā)起網(wǎng)絡請求,請求刷新數(shù)據(jù) 
  */ 
 
 }]; 
 } 
} 

// 上拉加載的原理 
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate 
{ 
 NSLog(@"%f",scrollView.contentOffset.y); 
 NSLog(@"%f",scrollView.frame.size.height); 
 NSLog(@"%f",scrollView.contentSize.height); 
 /** 
 * 關鍵--> 
 * scrollView一開始并不存在偏移量,但是會設定contentSize的大小,所以contentSize.height永遠都會比contentOffset.y高一個手機屏幕的 
 * 高度;上拉加載的效果就是每次滑動到底部時,再往上拉的時候請求更多,那個時候產(chǎn)生的偏移量,就能讓contentOffset.y + 手機屏幕尺寸高大于這 
 * 個滾動視圖的contentSize.height 
 */ 
 if (scrollView.contentOffset.y + scrollView.frame.size.height >= scrollView.contentSize.height) { 
 NSLog(@"%d %s",__LINE__,__FUNCTION__); 
 [UIView commitAnimations]; 
 [UIView animateWithDuration:1.0 animations:^{ 
  // frame發(fā)生的偏移量,距離底部往上提高60(可自行設定) 
  self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 60, 0); 
 } completion:^(BOOL finished) { 
  /** 
  * 發(fā)起網(wǎng)絡請求,請求加載更多數(shù)據(jù) 
  * 然后在數(shù)據(jù)請求回來的時候,將contentInset改為(0,0,0,0) 
  */ 
 }]; 
 } 
}

以上內容就是本文針對jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理詳解，希望對大家有所幫助。

您可能感興趣的文章: