index.wxs 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /**
  2. * 监听页面内值的变化,主要用于动态开关swipe-action
  3. * @param {Object} newValue
  4. * @param {Object} oldValue
  5. * @param {Object} ownerInstance
  6. * @param {Object} instance
  7. */
  8. function sizeReady(newValue, oldValue, ownerInstance, instance) {
  9. var state = instance.getState()
  10. state.position = JSON.parse(newValue)
  11. if (!state.position || state.position.length === 0) return
  12. var show = state.position[0].show
  13. state.left = state.left || state.position[0].left;
  14. // 通过用户变量,开启或关闭
  15. if (show) {
  16. openState(true, instance, ownerInstance)
  17. } else {
  18. openState(false, instance, ownerInstance)
  19. }
  20. }
  21. /**
  22. * 开始触摸操作
  23. * @param {Object} e
  24. * @param {Object} ins
  25. */
  26. function touchstart(e, ins) {
  27. var instance = e.instance;
  28. var state = instance.getState();
  29. var pageX = e.touches[0].pageX;
  30. // 开始触摸时移除动画类
  31. instance.removeClass('ani');
  32. var owner = ins.selectAllComponents('.button-hock')
  33. for (var i = 0; i < owner.length; i++) {
  34. owner[i].removeClass('ani');
  35. }
  36. // state.position = JSON.parse(instance.getDataset().position);
  37. state.left = state.left || state.position[0].left;
  38. // 获取最终按钮组的宽度
  39. state.width = pageX - state.left;
  40. ins.callMethod('closeSwipe')
  41. }
  42. /**
  43. * 开始滑动操作
  44. * @param {Object} e
  45. * @param {Object} ownerInstance
  46. */
  47. function touchmove(e, ownerInstance) {
  48. var instance = e.instance;
  49. var disabled = instance.getDataset().disabled
  50. var state = instance.getState()
  51. if (disabled) return
  52. var pageX = e.touches[0].pageX;
  53. move(pageX - state.width, instance, ownerInstance)
  54. }
  55. /**
  56. * 结束触摸操作
  57. * @param {Object} e
  58. * @param {Object} ownerInstance
  59. */
  60. function touchend(e, ownerInstance) {
  61. var instance = e.instance;
  62. var disabled = instance.getDataset().disabled
  63. var state = instance.getState()
  64. if (disabled) return
  65. // 滑动过程中触摸结束,通过阙值判断是开启还是关闭
  66. moveDirection(state.left, -40, instance, ownerInstance)
  67. }
  68. /**
  69. * 设置移动距离
  70. * @param {Object} value
  71. * @param {Object} instance
  72. * @param {Object} ownerInstance
  73. */
  74. function move(value, instance, ownerInstance) {
  75. var state = instance.getState()
  76. // 获取可滑动范围
  77. var x = Math.max(-state.position[1].width, Math.min((value), 0));
  78. state.left = x;
  79. instance.setStyle({
  80. transform: 'translateX(' + x + 'px)',
  81. '-webkit-transform': 'translateX(' + x + 'px)'
  82. })
  83. // 折叠按钮动画
  84. buttonFold(x, instance, ownerInstance)
  85. }
  86. /**
  87. * 移动方向判断
  88. * @param {Object} left
  89. * @param {Object} value
  90. * @param {Object} ownerInstance
  91. * @param {Object} ins
  92. */
  93. function moveDirection(left, value, ins, ownerInstance) {
  94. var state = ins.getState()
  95. var position = state.position
  96. var isopen = state.isopen
  97. if (!position[1].width) {
  98. openState(false, ins, ownerInstance)
  99. return
  100. }
  101. // 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
  102. if (isopen) {
  103. if (-left <= position[1].width) {
  104. openState(false, ins, ownerInstance)
  105. } else {
  106. openState(true, ins, ownerInstance)
  107. }
  108. return
  109. }
  110. // 如果是关闭状态,进行判断是否打开,还是保留关闭状态
  111. if (left <= value) {
  112. openState(true, ins, ownerInstance)
  113. } else {
  114. openState(false, ins, ownerInstance)
  115. }
  116. }
  117. /**
  118. * 设置按钮移动距离
  119. * @param {Object} value
  120. * @param {Object} instance
  121. * @param {Object} ownerInstance
  122. */
  123. function buttonFold(value, instance, ownerInstance) {
  124. var ins = ownerInstance.selectAllComponents('.button-hock');
  125. var state = instance.getState();
  126. var position = state.position;
  127. var arr = [];
  128. var w = 0;
  129. for (var i = 0; i < ins.length; i++) {
  130. if (!ins[i].getDataset().button) return
  131. var btnData = JSON.parse(ins[i].getDataset().button)
  132. var button = btnData[i] && btnData[i].width || 0
  133. w += button
  134. arr.push(-w)
  135. // 动态计算按钮组每个按钮的折叠动画移动距离
  136. var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
  137. if (i != 0) {
  138. ins[i].setStyle({
  139. transform: 'translateX(' + distance + 'px)',
  140. })
  141. }
  142. }
  143. }
  144. /**
  145. * 开启状态
  146. * @param {Boolean} type
  147. * @param {Object} ins
  148. * @param {Object} ownerInstance
  149. */
  150. function openState(type, ins, ownerInstance) {
  151. var state = ins.getState()
  152. var position = state.position
  153. if (state.isopen === undefined) {
  154. state.isopen = false
  155. }
  156. // console.log(state.isopen , type);
  157. // 只有状态有改变才会通知页面改变状态
  158. if (state.isopen !== type) {
  159. // 通知页面,已经打开
  160. ownerInstance.callMethod('change', {
  161. open: type
  162. })
  163. }
  164. // 设置打开和移动状态
  165. state.isopen = type
  166. // 添加动画类
  167. ins.addClass('ani');
  168. var owner = ownerInstance.selectAllComponents('.button-hock')
  169. for (var i = 0; i < owner.length; i++) {
  170. owner[i].addClass('ani');
  171. }
  172. // 设置最终移动位置
  173. move(type ? -position[1].width : 0, ins, ownerInstance)
  174. }
  175. module.exports = {
  176. sizeReady: sizeReady,
  177. touchstart: touchstart,
  178. touchmove: touchmove,
  179. touchend: touchend
  180. }