JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery

JQuery外掛：iScroll

頁面佈局：

<div id="wrapper">
  <div id="scroller">
   <div id="pullDown">
    <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
   </div>
   <ul id="thelist">
    <li>
     <img  src="/static/imghwm/default1.png"  data-src="img/page1_img1.jpg"  class="lazy" / alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png"  data-src="img/page1_img2.jpg"  class="lazy" / alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png"  data-src="img/page1_img3.jpg"  class="lazy" / alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png"  data-src="img/page1_img1.jpg"  class="lazy" / alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png"  data-src="img/page1_img2.jpg"  class="lazy" / alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >
    </li>
    <li>
     <img  src="/static/imghwm/default1.png"  data-src="img/page1_img3.jpg"  class="lazy" / alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >
    </li>
   </ul>
   <div id="pullUp">
    <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
   </div>
  </div>

翻頁，是透過ajax請求，把頁碼傳入一般處理程序，在一般處理程序中獲得分頁後的資料傳回json數組物件。

下拉刷新：

/**
  * 下拉刷新 （自定义实现此方法）
  * myScroll.refresh(); // 数据加载完成后，调用界面更新方法
  */
  function pullDownAction() {
   setTimeout(function () { 
    var el, li, i;
    el = document.getElementById('thelist');
    //==========================================
    $.ajax({
     type: "GET",
     url: "LoadMore.ashx",
     data: { page: generatedCount },
     dataType: "json",
     success: function (data) {
      var json = data;
      $(json).each(function () {
       li = document.createElement('li');
       // li.innerText = 'Generated row ' + (++generatedCount);
       li.innerHTML = '<img  src="' + this.src + '"/ alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >';
       el.insertBefore(li, el.childNodes[0]);
      })
     }
    });
    myScroll.refresh(); //数据加载完成后，调用界面更新方法  Remember to refresh when contents are loaded (ie: on ajax completion)
   }, 1000);  // <-- Simulate network congestion, remove setTimeout from production!
  }

上拉刷新

function pullUpAction() {
   setTimeout(function () {  
    var el, li, i;
    el = document.getElementById('thelist');
    //==========================================
    $.ajax({
     type: "GET",
     url: "LoadMore.ashx",
     data: { page: generatedCount },
     dataType: "json",
     success: function (data) {
      var json = data;
      $(json).each(function () {
       li = document.createElement('li');
       //  li.innerText = 'Generated row ' + (++generatedCount);
       li.innerHTML = '<img  src="' + this.src + '"/ alt="JQuery插件iScroll實作下拉刷新，滾動翻頁特效_jquery" >;     
       el.insertBefore(li, el.childNodes[0]);
      })
     }
    });
    //============================================
    myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
   }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
  }

初始化

/**
  * 初始化iScroll控件
  */
  function loaded() {
   pullDownEl = document.getElementById('pullDown');
   pullDownOffset = pullDownEl.offsetHeight;
   pullUpEl = document.getElementById('pullUp');
   pullUpOffset = pullUpEl.offsetHeight;
   myScroll = new iScroll('wrapper', {
    scrollbarClass: 'myScrollbar', /* 重要样式 */
    useTransition: false,
    topOffset: pullDownOffset,
    onRefresh: function () {
     if (pullDownEl.className.match('loading')) {
      pullDownEl.className = '';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
     } else if (pullUpEl.className.match('loading')) {
      pullUpEl.className = '';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
     }
    },
    onScrollMove: function () {
     if (this.y > 5 && !pullDownEl.className.match('flip')) {
      pullDownEl.className = 'flip';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
      this.minScrollY = 0;
     } else if (this.y < 5 && pullDownEl.className.match('flip')) {
      pullDownEl.className = '';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
      this.minScrollY = -pullDownOffset;
     } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
      pullUpEl.className = 'flip';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
      this.maxScrollY = this.maxScrollY;
     } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
      pullUpEl.className = '';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
      this.maxScrollY = pullUpOffset;
     }
    },
    onScrollEnd: function () {
     if (pullDownEl.className.match('flip')) {
      pullDownEl.className = 'loading';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
      pullDownAction(); // Execute custom function (ajax call&#63;)
     } else if (pullUpEl.className.match('flip')) {
      pullUpEl.className = 'loading';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
      pullUpAction(); // Execute custom function (ajax call&#63;)
     }
    }
   });
   setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  }
  //初始化绑定iScroll控件 
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  document.addEventListener('DOMContentLoaded', loaded, false);