储能智慧云小程序
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

pull-down-refresh.js 7.9KB

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