pull-down-refresh.js 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './props';
  10. import { unitConvert, systemInfo } from '../common/utils';
  11. import useCustomNavbar from '../mixins/using-custom-navbar';
  12. const { prefix } = config;
  13. const name = `${prefix}-pull-down-refresh`;
  14. let PullDownRefresh = class PullDownRefresh extends SuperComponent {
  15. constructor() {
  16. super(...arguments);
  17. this.pixelRatio = 1;
  18. this.startPoint = null;
  19. this.isPulling = false;
  20. this.maxRefreshAnimateTimeFlag = 0;
  21. this.closingAnimateTimeFlag = 0;
  22. this.refreshStatusTimer = null;
  23. this.externalClasses = [`${prefix}-class`, `${prefix}-class-loading`, `${prefix}-class-text`, `${prefix}-class-indicator`];
  24. this.options = {
  25. multipleSlots: true,
  26. pureDataPattern: /^_/,
  27. };
  28. this.relations = {
  29. '../back-top/back-top': {
  30. type: 'descendant',
  31. },
  32. };
  33. this.properties = props;
  34. this.behaviors = [useCustomNavbar];
  35. this.data = {
  36. prefix,
  37. classPrefix: name,
  38. barHeight: 0,
  39. tipsHeight: 0,
  40. refreshStatus: -1,
  41. loosing: false,
  42. enableToRefresh: true,
  43. scrollTop: 0,
  44. _maxBarHeight: 0,
  45. _loadingBarHeight: 0,
  46. };
  47. this.lifetimes = {
  48. attached() {
  49. const { screenWidth } = systemInfo;
  50. const { loadingTexts, maxBarHeight, loadingBarHeight } = this.properties;
  51. this.setData({
  52. _maxBarHeight: unitConvert(maxBarHeight),
  53. _loadingBarHeight: unitConvert(loadingBarHeight),
  54. loadingTexts: Array.isArray(loadingTexts) && loadingTexts.length >= 4
  55. ? loadingTexts
  56. : ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'],
  57. });
  58. this.pixelRatio = 750 / screenWidth;
  59. },
  60. detached() {
  61. clearTimeout(this.maxRefreshAnimateTimeFlag);
  62. clearTimeout(this.closingAnimateTimeFlag);
  63. this.resetTimer();
  64. },
  65. };
  66. this.observers = {
  67. value(val) {
  68. if (!val) {
  69. clearTimeout(this.maxRefreshAnimateTimeFlag);
  70. if (this.data.refreshStatus > 0) {
  71. this.setData({
  72. refreshStatus: 3,
  73. });
  74. }
  75. this.setData({ barHeight: 0 });
  76. }
  77. else {
  78. this.doRefresh();
  79. }
  80. },
  81. barHeight(val) {
  82. this.resetTimer();
  83. if (val === 0 && this.data.refreshStatus !== -1) {
  84. this.refreshStatusTimer = setTimeout(() => {
  85. this.setData({ refreshStatus: -1 });
  86. }, 240);
  87. }
  88. this.setData({ tipsHeight: Math.min(val, this.data._loadingBarHeight) });
  89. },
  90. maxBarHeight(v) {
  91. this.setData({ _maxBarHeight: unitConvert(v) });
  92. },
  93. loadingBarHeight(v) {
  94. this.setData({ _loadingBarHeight: unitConvert(v) });
  95. },
  96. };
  97. this.methods = {
  98. resetTimer() {
  99. if (this.refreshStatusTimer) {
  100. clearTimeout(this.refreshStatusTimer);
  101. this.refreshStatusTimer = null;
  102. }
  103. },
  104. onScrollToBottom() {
  105. this.triggerEvent('scrolltolower');
  106. },
  107. onScrollToTop() {
  108. this.setData({
  109. enableToRefresh: true,
  110. });
  111. },
  112. onScroll(e) {
  113. const { scrollTop } = e.detail;
  114. this.setData({
  115. enableToRefresh: scrollTop === 0,
  116. });
  117. this.triggerEvent('scroll', { scrollTop });
  118. },
  119. onTouchStart(e) {
  120. if (this.isPulling || !this.data.enableToRefresh || this.properties.disabled)
  121. return;
  122. const { touches } = e;
  123. if (touches.length !== 1)
  124. return;
  125. const { pageX, pageY } = touches[0];
  126. this.setData({ loosing: false });
  127. this.startPoint = { pageX, pageY };
  128. this.isPulling = true;
  129. },
  130. onTouchMove(e) {
  131. if (!this.startPoint || this.properties.disabled)
  132. return;
  133. const { touches } = e;
  134. if (touches.length !== 1)
  135. return;
  136. const { pageY } = touches[0];
  137. const offset = pageY - this.startPoint.pageY;
  138. if (offset > 0) {
  139. this.setRefreshBarHeight(offset);
  140. }
  141. },
  142. onTouchEnd(e) {
  143. if (!this.startPoint || this.properties.disabled)
  144. return;
  145. const { changedTouches } = e;
  146. if (changedTouches.length !== 1)
  147. return;
  148. const { pageY } = changedTouches[0];
  149. const barHeight = pageY - this.startPoint.pageY;
  150. this.startPoint = null;
  151. this.isPulling = false;
  152. this.setData({ loosing: true });
  153. if (barHeight > this.data._loadingBarHeight) {
  154. this._trigger('change', { value: true });
  155. this.triggerEvent('refresh');
  156. }
  157. else {
  158. this.setData({ barHeight: 0 });
  159. }
  160. },
  161. onDragStart(e) {
  162. const { scrollTop, scrollLeft } = e.detail;
  163. this.triggerEvent('dragstart', { scrollTop, scrollLeft });
  164. },
  165. onDragging(e) {
  166. const { scrollTop, scrollLeft } = e.detail;
  167. this.triggerEvent('dragging', { scrollTop, scrollLeft });
  168. },
  169. onDragEnd(e) {
  170. const { scrollTop, scrollLeft } = e.detail;
  171. this.triggerEvent('dragend', { scrollTop, scrollLeft });
  172. },
  173. doRefresh() {
  174. if (this.properties.disabled)
  175. return;
  176. this.setData({
  177. barHeight: this.data._loadingBarHeight,
  178. refreshStatus: 2,
  179. loosing: true,
  180. });
  181. this.maxRefreshAnimateTimeFlag = setTimeout(() => {
  182. this.maxRefreshAnimateTimeFlag = null;
  183. if (this.data.refreshStatus === 2) {
  184. this.triggerEvent('timeout');
  185. this._trigger('change', { value: false });
  186. }
  187. }, this.properties.refreshTimeout);
  188. },
  189. setRefreshBarHeight(value) {
  190. const barHeight = Math.min(value, this.data._maxBarHeight);
  191. const data = { barHeight };
  192. if (barHeight >= this.data._loadingBarHeight) {
  193. data.refreshStatus = 1;
  194. }
  195. else {
  196. data.refreshStatus = 0;
  197. }
  198. return new Promise((resolve) => {
  199. this.setData(data, () => resolve(barHeight));
  200. });
  201. },
  202. setScrollTop(scrollTop) {
  203. this.setData({ scrollTop });
  204. },
  205. scrollToTop() {
  206. this.setScrollTop(0);
  207. },
  208. };
  209. }
  210. };
  211. PullDownRefresh = __decorate([
  212. wxComponent()
  213. ], PullDownRefresh);
  214. export default PullDownRefresh;