JQuery插件iScroll實(shí)現(xiàn)下拉刷新，滾動(dòng)翻頁(yè)特效

    JQuery插件：iScroll
    頁(yè)面布局：
    <div id="wrapper">
      <div id="scroller">
       <div id="pullDown">
        <span></span><span>下拉刷新...</span>
       </div>
       <ul id="thelist">
        <li>
         <img src="img/page1_img1.jpg" />
        </li>
        <li>
         <img src="img/page1_img2.jpg" />
        </li>
        <li>
         <img src="img/page1_img3.jpg" />
        </li>
        <li>
         <img src="img/page1_img1.jpg" />
        </li>
        <li>
         <img src="img/page1_img2.jpg" />
        </li>
        <li>
         <img src="img/page1_img3.jpg" />
        </li>
       </ul>
       <div id="pullUp">
        <span></span><span>上拉加載更多...</span>
       </div>
      </div>翻頁(yè)，是通過ajax請(qǐng)求，把頁(yè)碼傳入一般處理程序，在一般處理程序中獲得分頁(yè)后的數(shù)據(jù)返回json數(shù)組對(duì)象。
    下拉刷新：
    /**
      * 下拉刷新 （自定義實(shí)現(xiàn)此方法）
      * myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法
      */
      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 + '"/>';
           el.insertBefore(li, el.childNodes[0]);
          })
         }
        });
        myScroll.refresh(); //數(shù)據(jù)加載完成后，調(diào)用界面更新方法  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 + '"/>;    
           el.insertBefore(li, el.childNodes[0]);
          })
         }
        });
        //============================================
        myScroll.refresh(); // 數(shù)據(jù)加載完成后，調(diào)用界面更新方法 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?)
         } else if (pullUpEl.className.match('flip')) {
          pullUpEl.className = 'loading';
          pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中...';
          pullUpAction(); // Execute custom function (ajax call?)
         }
        }
       });
       setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
      }
      //初始化綁定iScroll控件
      document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
      document.addEventListener('DOMContentLoaded', loaded, false);