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

JQuery插件：iScroll

页面布局：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

< 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数组对象。

下拉刷新：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/**    * 下拉刷新 （自定义实现此方法）    * 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!    }

上拉加载更多

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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.insertAfter(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!    }

初始化

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

/**    * 初始化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 );

 

 

转载于:https://www.cnblogs.com/hgbgfg/p/5459029.html