swiper.wxs 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. /**
  2. * 轮播触屏脚本
  3. */
  4. // 轮播容器ID
  5. var containerId = '#swiperContainer';
  6. // 移动阈值
  7. var moveThreshold = 0.3;
  8. // 轮播方向
  9. var DIRECTION = {
  10. // 水平
  11. HOR: 'horizontal',
  12. // 垂直
  13. VER: 'vertical',
  14. };
  15. function updateMoveInfo(state, event) {
  16. var touchPoint = event.touches[0];
  17. state.moveX = touchPoint.clientX - state.startX;
  18. state.moveY = touchPoint.clientY - state.startY;
  19. }
  20. function moveContainer(state, reset) {
  21. if (state.direction === DIRECTION.HOR) {
  22. var offset = reset ? state.offsetX : state.offsetX + state.moveX;
  23. // console.log(DIRECTION.HOR, state.moveX);
  24. if (offset > 0) {
  25. offset = Math.min(state.width * moveThreshold, offset);
  26. } else {
  27. offset = Math.max(-state.width * (state.total - (1 - moveThreshold)), offset);
  28. }
  29. setOffset(state, offset, 0, !reset);
  30. } else {
  31. var offset = reset ? state.offsetY : state.offsetY + state.moveY;
  32. // console.log(DIRECTION.VER, state.moveY);
  33. if (offset > 0) {
  34. offset = Math.min(state.height * moveThreshold, offset);
  35. } else {
  36. offset = Math.max(-state.height * (state.total - (1 - moveThreshold)), offset);
  37. }
  38. setOffset(state, 0, offset, !reset);
  39. }
  40. }
  41. function setOffset(state, offsetX, offsetY, disAni) {
  42. var transform = 'translate3d(' + (offsetX || 0) + 'px, ' + (offsetY || 0) + 'px, 0)';
  43. var styles = {
  44. // '-webkit-transform': transform,
  45. transform: transform,
  46. };
  47. if (disAni) {
  48. styles['transition'] = 'none';
  49. }
  50. state.container.setStyle(styles);
  51. }
  52. function initContainer(ownerInstance) {
  53. var state = ownerInstance.getState();
  54. state.container = state.container || ownerInstance.selectComponent(containerId);
  55. }
  56. function startDrag(event, ownerInstance) {
  57. initContainer(ownerInstance);
  58. var state = ownerInstance.getState();
  59. var touchPoint = event.touches[0];
  60. state.startX = touchPoint.clientX;
  61. state.startY = touchPoint.clientY;
  62. ownerInstance.callMethod('pause');
  63. }
  64. function onDrag(event, ownerInstance) {
  65. var state = ownerInstance.getState();
  66. state.dragging = true;
  67. updateMoveInfo(state, event);
  68. moveContainer(state);
  69. }
  70. function endDrag(event, ownerInstance) {
  71. var state = ownerInstance.getState();
  72. state.dragging = false;
  73. ownerInstance.callMethod('replay');
  74. var pageDir = '';
  75. if (state.direction === DIRECTION.HOR) {
  76. pageDir = getPageDir(state.moveX, state.width);
  77. } else {
  78. pageDir = getPageDir(state.moveY, state.height);
  79. }
  80. if (pageDir) {
  81. ownerInstance.callMethod(pageDir, { source: 'touch' });
  82. return;
  83. }
  84. // 重置
  85. moveContainer(state, true);
  86. }
  87. /**
  88. * 返回分页操作的方向
  89. * @param move 移动距离
  90. * @param size 容器尺寸
  91. * @returns
  92. */
  93. function getPageDir(move, size) {
  94. if (move > 0) {
  95. // 右滑超过阈值
  96. if (move > size * moveThreshold) {
  97. return 'prev';
  98. }
  99. } else {
  100. // 左滑超过阈值
  101. if (-move > size * moveThreshold) {
  102. return 'next';
  103. }
  104. }
  105. }
  106. function changeOffsetByDirection(direction, newVal, ownerInstance) {
  107. initContainer(ownerInstance);
  108. var state = ownerInstance.getState();
  109. if (state.direction !== direction) return;
  110. var needInit = !state.inited && state.currentInited;
  111. if (direction === DIRECTION.HOR) {
  112. setOffset(state, state.offsetX, 0, needInit);
  113. } else {
  114. setOffset(state, 0, state.offsetY, needInit);
  115. }
  116. if (needInit) {
  117. state.inited = true;
  118. ownerInstance.callMethod('inited');
  119. }
  120. }
  121. function changeOffsetX(newVal, oldVal, ownerInstance) {
  122. var state = ownerInstance.getState();
  123. state.offsetX = newVal;
  124. changeOffsetByDirection(DIRECTION.HOR, newVal, ownerInstance);
  125. }
  126. function changeOffsetY(newVal, oldVal, ownerInstance) {
  127. var state = ownerInstance.getState();
  128. state.offsetY = newVal;
  129. changeOffsetByDirection(DIRECTION.VER, newVal, ownerInstance);
  130. }
  131. function changeWidth(newVal, oldVal, ownerInstance) {
  132. var state = ownerInstance.getState();
  133. state.width = newVal;
  134. }
  135. function changeHeight(newVal, oldVal, ownerInstance) {
  136. var state = ownerInstance.getState();
  137. state.height = newVal;
  138. }
  139. function changeDirection(newVal, oldVal, ownerInstance) {
  140. var state = ownerInstance.getState();
  141. state.direction = newVal;
  142. if (oldVal && newVal !== oldVal) {
  143. state.inited = false;
  144. changeOffsetByDirection(newVal, state.offsetY, ownerInstance);
  145. }
  146. }
  147. function changeTotal(newVal, oldVal, ownerInstance) {
  148. var state = ownerInstance.getState();
  149. state.total = newVal;
  150. }
  151. function changeCurrentInited(newVal, oldVal, ownerInstance) {
  152. var state = ownerInstance.getState();
  153. state.currentInited = newVal;
  154. }
  155. module.exports = {
  156. startDrag: startDrag,
  157. onDrag: onDrag,
  158. endDrag: endDrag,
  159. changeOffsetX: changeOffsetX,
  160. changeOffsetY: changeOffsetY,
  161. changeWidth: changeWidth,
  162. changeHeight: changeHeight,
  163. changeDirection: changeDirection,
  164. changeTotal: changeTotal,
  165. changeCurrentInited: changeCurrentInited,
  166. };