JQuery插件iScroll实现下拉刷新，滚动翻页特效

来源：互联网发布：fkshow软件安卓版编辑：程序博客网时间：2024/05/21 08:01

下拉自动加载进行分页的运用越来越多，比起传统的分页该方法分页用户体验更好，布局也更简单了。目前正在使用和学习中……

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

0 1