mui.class.scroll.pullrefresh.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. (function($, window, document, undefined) {
  2. var CLASS_VISIBILITY = $.className('visibility');
  3. var CLASS_HIDDEN = $.className('hidden');
  4. var PullRefresh = $.Scroll.extend($.extend({
  5. handleEvent: function(e) {
  6. this._super(e);
  7. if (e.type === 'scrollbottom') {
  8. if (e.target === this.scroller) {
  9. this._scrollbottom();
  10. }
  11. }
  12. },
  13. _scrollbottom: function() {
  14. if (!this.pulldown && !this.loading) {
  15. this.pulldown = false;
  16. this._initPullupRefresh();
  17. this.pullupLoading();
  18. }
  19. },
  20. _start: function(e) {
  21. //仅下拉刷新在start阻止默认事件
  22. if (e.touches && e.touches.length && e.touches[0].clientX > 30) {
  23. e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
  24. }
  25. if (!this.loading) {
  26. this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
  27. }
  28. this._super(e);
  29. },
  30. _drag: function(e) {
  31. this._super(e);
  32. if (!this.pulldown && !this.loading && this.topPocket && e.detail.direction === 'down' && this.y >= 0) {
  33. this._initPulldownRefresh();
  34. }
  35. if (this.pulldown) {
  36. this._setCaption(this.y > this.options.down.height ? this.options.down.contentover : this.options.down.contentdown);
  37. }
  38. },
  39. _reLayout: function() {
  40. this.hasVerticalScroll = true;
  41. this._super();
  42. },
  43. //API
  44. resetPosition: function(time) {
  45. if (this.pulldown) {
  46. if (this.y >= this.options.down.height) {
  47. this.pulldownLoading(undefined, time || 0);
  48. return true;
  49. } else {
  50. !this.loading && this.topPocket.classList.remove(CLASS_VISIBILITY);
  51. }
  52. }
  53. return this._super(time);
  54. },
  55. pulldownLoading: function(y, time) {
  56. typeof y === 'undefined' && (y = this.options.down.height); //默认高度
  57. this.scrollTo(0, y, time, this.options.bounceEasing);
  58. if (this.loading) {
  59. return;
  60. }
  61. // if (!this.pulldown) {
  62. this._initPulldownRefresh();
  63. // }
  64. this._setCaption(this.options.down.contentrefresh);
  65. this.loading = true;
  66. this.indicators.map(function(indicator) {
  67. indicator.fade(0);
  68. });
  69. var callback = this.options.down.callback;
  70. callback && callback.call(this);
  71. },
  72. endPulldownToRefresh: function() {
  73. var self = this;
  74. if (self.topPocket && self.loading && this.pulldown) {
  75. self.scrollTo(0, 0, self.options.bounceTime, self.options.bounceEasing);
  76. self.loading = false;
  77. self._setCaption(self.options.down.contentdown, true);
  78. setTimeout(function() {
  79. self.loading || self.topPocket.classList.remove(CLASS_VISIBILITY);
  80. }, 350);
  81. }
  82. },
  83. pullupLoading: function(callback, x, time) {
  84. x = x || 0;
  85. this.scrollTo(x, this.maxScrollY, time, this.options.bounceEasing);
  86. if (this.loading) {
  87. return;
  88. }
  89. this._initPullupRefresh();
  90. this._setCaption(this.options.up.contentrefresh);
  91. this.indicators.map(function(indicator) {
  92. indicator.fade(0);
  93. });
  94. this.loading = true;
  95. callback = callback || this.options.up.callback;
  96. callback && callback.call(this);
  97. },
  98. endPullupToRefresh: function(finished) {
  99. var self = this;
  100. if (self.bottomPocket) { // && self.loading && !this.pulldown
  101. self.loading = false;
  102. if (finished) {
  103. this.finished = true;
  104. self._setCaption(self.options.up.contentnomore);
  105. // self.bottomPocket.classList.remove(CLASS_VISIBILITY);
  106. // self.bottomPocket.classList.add(CLASS_HIDDEN);
  107. self.wrapper.removeEventListener('scrollbottom', self);
  108. } else {
  109. self._setCaption(self.options.up.contentdown);
  110. // setTimeout(function() {
  111. self.loading || self.bottomPocket.classList.remove(CLASS_VISIBILITY);
  112. // }, 300);
  113. }
  114. }
  115. },
  116. disablePullupToRefresh: function() {
  117. this._initPullupRefresh();
  118. this.bottomPocket.className = $.className('pull-bottom-pocket') + ' ' + CLASS_HIDDEN;
  119. this.wrapper.removeEventListener('scrollbottom', this);
  120. },
  121. enablePullupToRefresh: function() {
  122. this._initPullupRefresh();
  123. this.bottomPocket.classList.remove(CLASS_HIDDEN);
  124. this._setCaption(this.options.up.contentdown);
  125. this.wrapper.addEventListener('scrollbottom', this);
  126. },
  127. refresh: function(isReset) {
  128. if (isReset && this.finished) {
  129. this.enablePullupToRefresh();
  130. this.finished = false;
  131. }
  132. this._super();
  133. },
  134. }, $.PullRefresh));
  135. $.fn.pullRefresh = function(options) {
  136. if (this.length === 1) {
  137. var self = this[0];
  138. var pullRefreshApi = null;
  139. var id = self.getAttribute('data-pullrefresh');
  140. if (!id && typeof options === 'undefined') {
  141. return false;
  142. }
  143. options = options || {};
  144. if (!id) {
  145. id = ++$.uuid;
  146. $.data[id] = pullRefreshApi = new PullRefresh(self, options);
  147. self.setAttribute('data-pullrefresh', id);
  148. } else {
  149. pullRefreshApi = $.data[id];
  150. }
  151. if (options.down && options.down.auto) { //如果设置了auto,则自动下拉一次
  152. pullRefreshApi.pulldownLoading(options.down.autoY);
  153. } else if (options.up && options.up.auto) { //如果设置了auto,则自动上拉一次
  154. pullRefreshApi.pullupLoading();
  155. }
  156. //暂不提供这种调用方式吧
  157. // if (typeof options === 'string') {
  158. // var methodValue = pullRefreshApi[options].apply(pullRefreshApi, $.slice.call(arguments, 1));
  159. // if (methodValue !== undefined) {
  160. // return methodValue;
  161. // }
  162. // }
  163. return pullRefreshApi;
  164. }
  165. };
  166. })(mui, window, document);