index.wxs 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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. // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  52. disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  53. if (disabled) return
  54. var pageX = e.touches[0].pageX;
  55. move(pageX - state.width, instance, ownerInstance)
  56. }
  57. /**
  58. * 结束触摸操作
  59. * @param {Object} e
  60. * @param {Object} ownerInstance
  61. */
  62. function touchend(e, ownerInstance) {
  63. var instance = e.instance;
  64. var disabled = instance.getDataset().disabled
  65. var state = instance.getState()
  66. // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  67. disabled = (typeof(disabled) === 'string' ? JSON.parse(disabled) : disabled) || false;
  68. if (disabled) return
  69. // 滑动过程中触摸结束,通过阙值判断是开启还是关闭
  70. // fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
  71. moveDirection(state.left, -40, instance, ownerInstance)
  72. }
  73. /**
  74. * 设置移动距离
  75. * @param {Object} value
  76. * @param {Object} instance
  77. * @param {Object} ownerInstance
  78. */
  79. function move(value, instance, ownerInstance) {
  80. var state = instance.getState()
  81. // 获取可滑动范围
  82. var x = Math.max(-state.position[1].width, Math.min((value), 0));
  83. state.left = x;
  84. instance.setStyle({
  85. transform: 'translateX(' + x + 'px)',
  86. '-webkit-transform': 'translateX(' + x + 'px)'
  87. })
  88. // 折叠按钮动画
  89. buttonFold(x, instance, ownerInstance)
  90. }
  91. /**
  92. * 移动方向判断
  93. * @param {Object} left
  94. * @param {Object} value
  95. * @param {Object} ownerInstance
  96. * @param {Object} ins
  97. */
  98. function moveDirection(left, value, ins, ownerInstance) {
  99. var state = ins.getState()
  100. var position = state.position
  101. var isopen = state.isopen
  102. if (!position[1].width) {
  103. openState(false, ins, ownerInstance)
  104. return
  105. }
  106. // 如果已经是打开状态,进行判断是否关闭,还是保留打开状态
  107. if (isopen) {
  108. if (-left <= position[1].width) {
  109. openState(false, ins, ownerInstance)
  110. } else {
  111. openState(true, ins, ownerInstance)
  112. }
  113. return
  114. }
  115. // 如果是关闭状态,进行判断是否打开,还是保留关闭状态
  116. if (left <= value) {
  117. openState(true, ins, ownerInstance)
  118. } else {
  119. openState(false, ins, ownerInstance)
  120. }
  121. }
  122. /**
  123. * 设置按钮移动距离
  124. * @param {Object} value
  125. * @param {Object} instance
  126. * @param {Object} ownerInstance
  127. */
  128. function buttonFold(value, instance, ownerInstance) {
  129. var ins = ownerInstance.selectAllComponents('.button-hock');
  130. var state = instance.getState();
  131. var position = state.position;
  132. var arr = [];
  133. var w = 0;
  134. for (var i = 0; i < ins.length; i++) {
  135. if (!ins[i].getDataset().button) return
  136. var btnData = JSON.parse(ins[i].getDataset().button)
  137. // fix by mehaotian TODO 在 app-vue 中,字符串转对象,需要转两次,这里先这么兼容
  138. if (typeof(btnData) === 'string') {
  139. btnData = JSON.parse(btnData)
  140. }
  141. var button = btnData[i] && btnData[i].width || 0
  142. w += button
  143. arr.push(-w)
  144. // 动态计算按钮组每个按钮的折叠动画移动距离
  145. var distance = arr[i - 1] + value * (arr[i - 1] / position[1].width)
  146. if (i != 0) {
  147. ins[i].setStyle({
  148. transform: 'translateX(' + distance + 'px)',
  149. })
  150. }
  151. }
  152. }
  153. /**
  154. * 开启状态
  155. * @param {Boolean} type
  156. * @param {Object} ins
  157. * @param {Object} ownerInstance
  158. */
  159. function openState(type, ins, ownerInstance) {
  160. var state = ins.getState()
  161. var position = state.position
  162. if (state.isopen === undefined) {
  163. state.isopen = false
  164. }
  165. // 只有状态有改变才会通知页面改变状态
  166. if (state.isopen !== type) {
  167. // 通知页面,已经打开
  168. ownerInstance.callMethod('change', {
  169. open: type
  170. })
  171. }
  172. // 设置打开和移动状态
  173. state.isopen = type
  174. // 添加动画类
  175. ins.addClass('ani');
  176. var owner = ownerInstance.selectAllComponents('.button-hock')
  177. for (var i = 0; i < owner.length; i++) {
  178. owner[i].addClass('ani');
  179. }
  180. // 设置最终移动位置
  181. move(type ? -position[1].width : 0, ins, ownerInstance)
  182. }
  183. module.exports = {
  184. sizeReady: sizeReady,
  185. touchstart: touchstart,
  186. touchmove: touchmove,
  187. touchend: touchend
  188. }