swipe-cell.wxs 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. var THRESHOLD = 0.3;
  2. var MIN_DISTANCE = 10;
  3. var owner;
  4. var state;
  5. var getState = function (ownerInstance) {
  6. owner = ownerInstance;
  7. state = owner.getState();
  8. state.leftWidth = state.leftWidth || 0;
  9. state.rightWidth = state.rightWidth || 0;
  10. state.offset = state.offset || 0;
  11. state.startOffset = state.startOffset || 0;
  12. state.opened = state.opened || false;
  13. };
  14. var initRightWidth = function (newVal, oldVal, ownerInstance) {
  15. getState(ownerInstance);
  16. state.rightWidth = newVal;
  17. initOpen(ownerInstance);
  18. };
  19. var initLeftWidth = function (newVal, oldVal, ownerInstance) {
  20. getState(ownerInstance);
  21. state.leftWidth = newVal;
  22. initOpen(ownerInstance);
  23. };
  24. var initOpen = function (ownerInstance) {
  25. getState(ownerInstance);
  26. if (state.opened.constructor === 'Boolean') {
  27. // opened为boolen类型,判断默认打开
  28. if (state.opened && state.rightWidth > 0) {
  29. swipeMove(-state.rightWidth);
  30. } else if (state.opened && state.leftWidth > 0) {
  31. swipeMove(state.leftWidth);
  32. }
  33. }
  34. if (state.opened.constructor === 'Array') {
  35. // opened为array类型,判断默认打开,同时设定左右action时优先打开右边
  36. if (state.opened[1] && state.rightWidth > 0) {
  37. swipeMove(-state.rightWidth);
  38. } else if (state.opened[0] && state.leftWidth > 0) {
  39. swipeMove(state.leftWidth);
  40. }
  41. }
  42. };
  43. var resetTouchStatus = function () {
  44. state.direction = '';
  45. state.deltaX = 0;
  46. state.deltaY = 0;
  47. state.offsetX = 0;
  48. state.offsetY = 0;
  49. };
  50. var touchMove = function (event) {
  51. var touchPoint = event.touches[0];
  52. state.deltaX = touchPoint.clientX - state.startX;
  53. state.deltaY = touchPoint.clientY - state.startY;
  54. state.offsetX = Math.abs(state.deltaX);
  55. state.offsetY = Math.abs(state.deltaY);
  56. state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
  57. };
  58. var getDirection = function (x, y) {
  59. if (x > y && x > MIN_DISTANCE) {
  60. return 'horizontal';
  61. }
  62. if (y > x && y > MIN_DISTANCE) {
  63. return 'vertical';
  64. }
  65. return '';
  66. };
  67. var range = function (num, min, max) {
  68. return Math.min(Math.max(num, min), max);
  69. };
  70. var swipeMove = function (_offset) {
  71. if (_offset === undefined) _offset = 0;
  72. state.offset = range(_offset, -state.rightWidth, +state.leftWidth);
  73. var transform = 'translate3d(' + state.offset + 'px, 0, 0)';
  74. var transition = state.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
  75. owner.selectComponent('#wrapper').setStyle({
  76. '-webkit-transform': transform,
  77. '-webkit-transition': transition,
  78. transform: transform,
  79. transition: transition,
  80. });
  81. };
  82. var close = function () {
  83. swipeMove(0);
  84. };
  85. var onCloseChange = function (newVal, oldVal, ownerInstance) {
  86. getState(ownerInstance);
  87. if (newVal === oldVal) return;
  88. if (newVal) {
  89. close();
  90. }
  91. };
  92. var onOpenedChange = function (newVal, oldVal, ownerInstance) {
  93. getState(ownerInstance);
  94. state.opened = newVal;
  95. if (newVal === oldVal) return;
  96. if (!newVal) {
  97. close();
  98. }
  99. };
  100. var touchStart = function (event) {
  101. resetTouchStatus();
  102. state.startOffset = state.offset;
  103. var touchPoint = event.touches[0];
  104. state.startX = touchPoint.clientX;
  105. state.startY = touchPoint.clientY;
  106. owner.callMethod('closeOther');
  107. };
  108. var startDrag = function (event, ownerInstance) {
  109. getState(ownerInstance);
  110. touchStart(event);
  111. };
  112. var onDrag = function (event, ownerInstance) {
  113. getState(ownerInstance);
  114. touchMove(event);
  115. if (state.direction !== 'horizontal') {
  116. return;
  117. }
  118. state.dragging = true;
  119. swipeMove(state.startOffset + state.deltaX);
  120. };
  121. var open = function (position) {
  122. var _offset = position === 'left' ? +state.leftWidth : -state.rightWidth;
  123. owner.callMethod('open', { position: position });
  124. swipeMove(_offset);
  125. };
  126. var endDrag = function (event, ownerInstance) {
  127. getState(ownerInstance);
  128. state.dragging = false;
  129. // 左/右侧有可滑动区域,且当前不是已open状态,且滑动幅度超过阈值时open左/右侧(滚动到该侧的最边上)
  130. if (
  131. +state.rightWidth > 0 &&
  132. -state.startOffset < +state.rightWidth &&
  133. -state.offset > +state.rightWidth * THRESHOLD
  134. ) {
  135. open('right');
  136. } else if (
  137. +state.leftWidth > 0 &&
  138. state.startOffset < +state.leftWidth &&
  139. state.offset > +state.leftWidth * THRESHOLD
  140. ) {
  141. open('left');
  142. } else {
  143. // 仅在有发生侧滑的情况下自动关闭(由js控制是否异步关闭)
  144. if (state.startOffset !== state.offset) {
  145. close();
  146. }
  147. }
  148. };
  149. module.exports = {
  150. initLeftWidth: initLeftWidth,
  151. initRightWidth: initRightWidth,
  152. startDrag: startDrag,
  153. onDrag: onDrag,
  154. endDrag: endDrag,
  155. onCloseChange: onCloseChange,
  156. onOpenedChange: onOpenedChange,
  157. };