iscroll-pull-up-down.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. var IScrollPullUpDown = function (wrapperName,iScrollConfig,pullDownActionHandler,pullUpActionHandler) {
  2. var iScrollConfig,pullDownActionHandler,pullUpActionHandler,pullDownEl,pullDownOffset,pullUpEl,scrollStartPos;
  3. var pullThreshold=5;
  4. var me=this;
  5. function showPullDownElNow(className) {
  6. // Shows pullDownEl with a given className
  7. pullDownEl.style.transitionDuration='';
  8. pullDownEl.style.marginTop='';
  9. pullDownEl.className = 'pullDown '+className;
  10. }
  11. var hidePullDownEl = function (time,refresh) {
  12. // Hides pullDownEl
  13. pullDownEl.style.transitionDuration=(time>0?time+'ms':'');
  14. pullDownEl.style.marginTop='';
  15. pullDownEl.className = 'pullDown scrolledUp';
  16. // If refresh==true, refresh again after time+10 ms to update iScroll's "scroller.offsetHeight" after the pull-down-bar is really hidden...
  17. // Don't refresh when the user is still dragging, as this will cause the content to jump (i.e. don't refresh while dragging)
  18. if (refresh) setTimeout(function(){me.myScroll.refresh();},time+10);
  19. }
  20. function init() {
  21. var wrapperObj = document.querySelector('#'+wrapperName);
  22. var scrollerObj = wrapperObj.children[0];
  23. if (pullDownActionHandler) {
  24. // If a pullDownActionHandler-function is supplied, add a pull-down bar at the top and enable pull-down-to-refresh.
  25. // (if pullDownActionHandler==null this iScroll will have no pull-down-functionality)
  26. pullDownEl=document.createElement('div');
  27. pullDownEl.className='pullDown scrolledUp';
  28. pullDownEl.innerHTML='<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新</span>';
  29. scrollerObj.insertBefore(pullDownEl, scrollerObj.firstChild);
  30. pullDownOffset = pullDownEl.offsetHeight;
  31. }
  32. if (pullUpActionHandler) {
  33. // If a pullUpActionHandler-function is supplied, add a pull-up bar in the bottom and enable pull-up-to-load.
  34. // (if pullUpActionHandler==null this iScroll will have no pull-up-functionality)
  35. pullUpEl=document.createElement('div');
  36. pullUpEl.className='pullUp';
  37. pullUpEl.innerHTML='<span class="pullUpIcon"></span><span class="pullUpLabel" style="margin: 3px 20%">上拉加载更多</span>';
  38. scrollerObj.appendChild(pullUpEl);
  39. }
  40. me.myScroll = new IScroll(wrapperObj,iScrollConfig);
  41. me.myScroll.on('refresh',function() {
  42. if ((pullDownEl)&&(pullDownEl.className.match('loading'))) {
  43. pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
  44. if (this.y>=0) {
  45. // The pull-down-bar is fully visible:
  46. // Hide it with a simple 250ms animation
  47. hidePullDownEl(250,true);
  48. } else if (this.y>-pullDownOffset) {
  49. // The pull-down-bar is PARTLY visible:
  50. // Set up a shorter animation to hide it
  51. // Firt calculate a new margin-top for pullDownEl that matches the current scroll position
  52. pullDownEl.style.marginTop=this.y+'px';
  53. // CSS-trick to force webkit to render/update any CSS-changes immediately: Access the offsetHeight property...
  54. pullDownEl.offsetHeight;
  55. // Calculate the animation time (shorter, dependant on the new distance to animate) from here to completely 'scrolledUp' (hidden)
  56. // Needs to be done before adjusting the scroll-positon (if we want to read this.y)
  57. var animTime=(250*(pullDownOffset+this.y)/pullDownOffset);
  58. // Set scroll positon to top
  59. // (this is the same as adjusting the scroll postition to match the exact movement pullDownEl made due to the change of margin-top above, so the content will not "jump")
  60. this.scrollTo(0,0,0);
  61. // Hide pullDownEl with the new (shorter) animation (and reset the inline style again).
  62. setTimeout(function() { // Do this in a new thread to avoid glitches in iOS webkit (will make sure the immediate margin-top change above is rendered)...
  63. hidePullDownEl(animTime,true);
  64. },0);
  65. } else {
  66. // The pull-down-bar is completely off screen:
  67. // Hide it immediately
  68. hidePullDownEl(0,true);
  69. // And adjust the scroll postition to match the exact movement pullDownEl made due to change of margin-top above, so the content will not "jump"
  70. this.scrollBy(0,pullDownOffset,0);
  71. }
  72. }
  73. if ((pullUpEl)&&(pullUpEl.className.match('loading'))) {
  74. pullUpEl.className = 'pullUp';
  75. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
  76. }
  77. });
  78. me.myScroll.on('scrollStart',function() {
  79. scrollStartPos=this.y; // Store the scroll starting point to be able to track movement in 'scroll' below
  80. });
  81. me.myScroll.on('scroll',function() {
  82. if (pullDownEl||pullUpEl) {
  83. if((scrollStartPos==0)&&(this.y==0)) {
  84. // 'scroll' called, but scroller is not moving!
  85. // Probably because the content inside wrapper is small and fits the screen, so drag/scroll is disabled by iScroll
  86. // Fix this by a hack: Setting "myScroll.hasVerticalScroll=true" tricks iScroll to believe
  87. // that there is a vertical scrollbar, and iScroll will enable dragging/scrolling again...
  88. this.hasVerticalScroll=true;
  89. // Set scrollStartPos to -1000 to be able to detect this state later...
  90. scrollStartPos=-1000;
  91. } else if ((scrollStartPos==-1000) &&
  92. (((!pullUpEl)&&(!pullDownEl.className.match('flip'))&&(this.y<0)) ||
  93. ((!pullDownEl)&&(!pullUpEl.className.match('flip'))&&(this.y>0)))) {
  94. // Scroller was not moving at first (and the trick above was applied), but now it's moving in the wrong direction.
  95. // I.e. the user is either scrolling up while having no "pull-up-bar",
  96. // or scrolling down while having no "pull-down-bar" => Disable the trick again and reset values...
  97. this.hasVerticalScroll=false;
  98. scrollStartPos=0;
  99. this.scrollBy(0,-this.y, 0); // Adjust scrolling position to undo this "invalid" movement
  100. }
  101. }
  102. if (pullDownEl) {
  103. if (this.y > pullDownOffset+pullThreshold && !pullDownEl.className.match('flip')) {
  104. showPullDownElNow('flip');
  105. this.scrollBy(0,-pullDownOffset, 0); // Adjust scrolling position to match the change in pullDownEl's margin-top
  106. pullDownEl.querySelector('.pullDownLabel').innerHTML = '界面刷新中...';
  107. } else if (this.y < 0 && pullDownEl.className.match('flip')) { // User changes his mind...
  108. hidePullDownEl(0,false);
  109. this.scrollBy(0,pullDownOffset, 0); // Adjust scrolling position to match the change in pullDownEl's margin-top
  110. pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
  111. }
  112. }
  113. if (pullUpEl) {
  114. if (this.y < (this.maxScrollY - pullThreshold) && !pullUpEl.className.match('flip')) {
  115. pullUpEl.className = 'pullUp flip';
  116. pullUpEl.querySelector('.pullUpLabel').innerHTML = '正在加载...';
  117. } else if (this.y > (this.maxScrollY + pullThreshold) && pullUpEl.className.match('flip')) {
  118. pullUpEl.className = 'pullUp';
  119. pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
  120. }
  121. }
  122. });
  123. me.myScroll.on('scrollEnd',function() {
  124. if ((pullDownEl)&&(pullDownEl.className.match('flip'))) {
  125. showPullDownElNow('loading');
  126. pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
  127. pullDownActionHandler(this); // Execute custom function (ajax call?)
  128. }
  129. if ((pullUpEl)&&(pullUpEl.className.match('flip'))) {
  130. pullUpEl.className = 'pullUp loading';
  131. pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
  132. pullUpActionHandler(this); // Execute custom function (ajax call?)
  133. }
  134. if (scrollStartPos=-1000) {
  135. // If scrollStartPos=-1000: Recalculate the true value of "hasVerticalScroll" as it may have been
  136. // altered in 'scroll' to enable pull-to-refresh/load when the content fits the screen...
  137. this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0;
  138. }
  139. });
  140. }
  141. init();
  142. return me.myScroll;
  143. };