亚洲免费不卡_在线视频精品_国产尤物精品_久久久久网址_久久精品91_欧美va天堂在线_狠狠入ady亚洲精品_亚洲午夜精品福利_国产精品草草_午夜精品久久99蜜桃的功能介绍

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請求，把頁碼傳入一般處理程序，在一般處理程序中獲得分頁后的數據返回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 + '"/>';

       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 + '"/>;    

       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?)

     } 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技術專欄