快捷導(dǎo)航

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

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

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

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

在線預(yù)覽源碼下載

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>

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

代碼如下：

// 下拉刷新的原理 
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView 
{ 
 if (scrollView.contentOffset.y < - 100) { 
  
 [UIView animateWithDuration:1.0 animations:^{ 
  
  // frame發(fā)生偏移,距離頂部150的距離(可自行設(shè)定) 
  self.tableView.contentInset = UIEdgeInsetsMake(150.0f, 0.0f, 0.0f, 0.0f); 
 } completion:^(BOOL finished) { 
  
  /** 
  * 發(fā)起網(wǎng)絡(luò)請(qǐng)求,請(qǐ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); 
 /** 
 * 關(guān)鍵--> 
 * scrollView一開(kāi)始并不存在偏移量,但是會(huì)設(shè)定contentSize的大小,所以contentSize.height永遠(yuǎn)都會(huì)比contentOffset.y高一個(gè)手機(jī)屏幕的 
 * 高度;上拉加載的效果就是每次滑動(dòng)到底部時(shí),再往上拉的時(shí)候請(qǐng)求更多,那個(gè)時(shí)候產(chǎn)生的偏移量,就能讓contentOffset.y + 手機(jī)屏幕尺寸高大于這 
 * 個(gè)滾動(dòng)視圖的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(可自行設(shè)定) 
  self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 60, 0); 
 } completion:^(BOOL finished) { 
  /** 
  * 發(fā)起網(wǎng)絡(luò)請(qǐng)求,請(qǐng)求加載更多數(shù)據(jù) 
  * 然后在數(shù)據(jù)請(qǐng)求回來(lái)的時(shí)候,將contentInset改為(0,0,0,0) 
  */ 
 }]; 
 } 
}

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

您可能感興趣的文章: