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="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 class="pullUpIcon"></span><span class="pullUpLabel">上拉加載更多...</span>

   </div>

  </div>翻頁，是通過ajax請求，把頁碼傳入一般處理程序，在一般處理程序中獲得分頁后的數(shù)據(jù)返回json數(shù)組對象。

下拉刷新：

/**

  * 下拉刷新 （自定義實(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);

更多信息請查看IT技術(shù)專欄