index - backup.wxs 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. /**
  2. * 此为wxs模块,只支持APP-VUE,微信和QQ小程序以及H5平台
  3. * wxs内部不支持es6语法,变量只能使用var定义,无法使用解构,箭头函数等特性
  4. */
  5. // 开始触摸
  6. function touchstart(event, ownerInstance) {
  7. // 触发事件的组件的ComponentDescriptor实例
  8. var instance = event.instance
  9. // wxs内的局部变量快照,此快照是属于整个组件的,在touchstart和touchmove事件中都能获取到相同的结果
  10. var state = instance.getState()
  11. if (state.disable) return
  12. var touches = event.touches
  13. // 如果进行的是多指触控,不允许进行操作
  14. if (touches && touches.length > 1) return
  15. // 标识当前为滑动中状态
  16. state.moving = true
  17. // 记录触摸开始点的坐标值
  18. state.startX = touches[0].pageX
  19. state.startY = touches[0].pageY
  20. }
  21. // 触摸滑动
  22. function touchmove(event, ownerInstance) {
  23. // 触发事件的组件的ComponentDescriptor实例
  24. var instance = event.instance
  25. // wxs内的局部变量快照
  26. var state = instance.getState()
  27. if (state.disabled || !state.moving) return
  28. var touches = event.touches
  29. var pageX = touches[0].pageX
  30. var pageY = touches[0].pageY
  31. var moveX = pageX - state.startX
  32. var moveY = pageY - state.startY
  33. var buttonsWidth = state.buttonsWidth
  34. // 移动的X轴距离大于Y轴距离,也即终点与起点位置连线,与X轴夹角小于45度时,禁止页面滚动
  35. if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
  36. event.preventDefault()
  37. event.stopPropagation()
  38. }
  39. // 如果移动的X轴距离小于Y轴距离,也即终点位置与起点位置连线,与Y轴夹角小于45度时,认为是页面上下滑动,而不是左右滑动单元格
  40. if (Math.abs(moveX) < Math.abs(moveY)) return
  41. // 限制右滑的距离,不允许内容部分往右偏移,右滑会导致X轴偏移值大于0,以此做判断
  42. // 此处不能直接return,因为滑动过程中会缺失某些关键点坐标,会导致错乱,最好的办法就是
  43. // 在超出后,设置为0
  44. if (state.status === 'open') {
  45. // 在开启状态下,向左滑动,需忽略
  46. if (moveX < 0) moveX = 0
  47. // 想要收起菜单,最大能移动的距离为按钮的总宽度
  48. if (moveX > buttonsWidth) moveX = buttonsWidth
  49. // 如果是已经打开了的状态,向左滑动时,移动收起菜单
  50. moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
  51. } else {
  52. // 关闭状态下,右滑动需忽略
  53. if (moveX > 0) moveX = 0
  54. // 滑动的距离不允许超过所有按钮的总宽度,此时只能是左滑,最终设置按钮的总宽度,同时为负数
  55. if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
  56. // 只要是在滑过程中,就不断移动菜单的内容部分,从而使隐藏的菜单显示出来
  57. moveSwipeAction(moveX, instance, ownerInstance)
  58. }
  59. }
  60. // 触摸结束
  61. function touchend(event, ownerInstance) {
  62. // 触发事件的组件的ComponentDescriptor实例
  63. var instance = event.instance
  64. // wxs内的局部变量快照
  65. var state = instance.getState()
  66. if (!state.moving || state.disabled) return
  67. var touches = event.changedTouches ? event.changedTouches[0] : {}
  68. var pageX = touches.pageX
  69. var pageY = touches.pageY
  70. var moveX = pageX - state.startX
  71. if (state.status === 'open') {
  72. // 在展开的状态下,继续左滑,无需操作
  73. if (moveX < 0) return
  74. // 在开启状态下,点击一下内容区域,moveX为0,也即没有进行移动,这时执行收起菜单逻辑
  75. if (moveX === 0) {
  76. return closeSwipeAction(instance, ownerInstance)
  77. }
  78. // 在开启状态下,滑动距离小于阈值,则默认为不关闭,同时恢复原来的打开状态
  79. if (Math.abs(moveX) < state.threshold) {
  80. openSwipeAction(instance, ownerInstance)
  81. } else {
  82. // 如果滑动距离大于阈值,则执行收起逻辑
  83. closeSwipeAction(instance, ownerInstance)
  84. }
  85. } else {
  86. // 在关闭的状态下,右滑,无需操作
  87. if (moveX > 0) return
  88. // 理由同上
  89. if (Math.abs(moveX) < state.threshold) {
  90. closeSwipeAction(instance, ownerInstance)
  91. } else {
  92. openSwipeAction(instance, ownerInstance)
  93. }
  94. }
  95. }
  96. // 获取过渡时间
  97. function getDuration(value) {
  98. if (value.toString().indexOf('s') >= 0) return value
  99. return value > 30 ? value + 'ms' : value + 's'
  100. }
  101. // 滑动结束时判断滑动的方向
  102. function getMoveDirection(instance, ownerInstance) {
  103. var state = instance.getState()
  104. }
  105. // 移动滑动选择器内容区域,同时显示出其隐藏的菜单
  106. function moveSwipeAction(moveX, instance, ownerInstance) {
  107. var state = instance.getState()
  108. // 获取所有按钮的实例,需要通过它去设置按钮的位移
  109. var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
  110. var len = buttons.length
  111. var previewButtonsMoveX = 0
  112. // 设置菜单内容部分的偏移
  113. instance.requestAnimationFrame(function() {
  114. instance.setStyle({
  115. // 设置translateX的值
  116. 'transition': 'none',
  117. transform: 'translateX(' + moveX + 'px)',
  118. '-webkit-transform': 'translateX(' + moveX + 'px)'
  119. })
  120. // 折叠按钮动画
  121. for (var i = len - 1; i >= 0; i--) {
  122. // 通过比例,得出元素自身该移动的距离
  123. var translateX = state.buttons[i].width / state.buttonsWidth * moveX
  124. // 最终移动的距离,是通过自身比例算出的距离,再加上在它之前所有按钮移动的距离之和
  125. var realTranslateX = translateX + previewButtonsMoveX
  126. buttons[i].setStyle({
  127. // 在移动期间,不能使用过渡效果,否则会造成卡顿,本质原因是每次移动一点,就要花一定时间去过渡这个过程
  128. 'transition': 'none',
  129. 'transform': 'translateX(' + realTranslateX + 'px)',
  130. '-webkit-transform': 'translateX(' + realTranslateX + 'px)'
  131. })
  132. // 记录本按钮之前的所有按钮的移动距离之和
  133. previewButtonsMoveX += translateX
  134. }
  135. })
  136. }
  137. // 一次性展开滑动菜单
  138. function openSwipeAction(instance, ownerInstance) {
  139. var state = instance.getState()
  140. // 获取所有按钮的实例,需要通过它去设置按钮的位移
  141. var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
  142. var len = buttons.length
  143. // 处理duration单位问题
  144. const duration = getDuration(state.duration)
  145. // 展开过程中,是向左移动,所以X的偏移应该为负值
  146. var buttonsWidth = -state.buttonsWidth
  147. var previewButtonsMoveX = 0
  148. instance.requestAnimationFrame(function() {
  149. // 设置菜单主体内容
  150. instance.setStyle({
  151. 'transition': 'transform ' + duration,
  152. 'transform': 'translateX(' + buttonsWidth + 'px)',
  153. '-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
  154. })
  155. // 设置各个隐藏的按钮为展开的状态
  156. for (var i = len - 1; i >= 0; i--) {
  157. // 通过比例,得出元素自身该移动的距离
  158. var translateX = state.buttons[i].width / state.buttonsWidth * buttonsWidth
  159. // 最终移动的距离,是通过自身比例算出的距离,再加上在它之前所有按钮移动的距离之和
  160. var realTranslateX = translateX + previewButtonsMoveX
  161. buttons[i].setStyle({
  162. // 在移动期间,需要加上动画效果
  163. 'transition': 'transform ' + duration,
  164. 'transform': 'translateX(' + realTranslateX + 'px)',
  165. '-webkit-transform': 'translateX(' + realTranslateX + 'px)'
  166. })
  167. // 记录本按钮之前的所有按钮的移动距离之和
  168. previewButtonsMoveX += translateX
  169. }
  170. })
  171. setStatus('open', instance)
  172. }
  173. // 标记菜单的当前状态,open-已经打开,close-已经关闭
  174. function setStatus(status, instance) {
  175. var state = instance.getState()
  176. state.status = status
  177. }
  178. // 一次性收起滑动菜单
  179. function closeSwipeAction(instance, ownerInstance) {
  180. var state = instance.getState()
  181. // 获取所有按钮的实例,需要通过它去设置按钮的位移
  182. var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
  183. var len = buttons.length
  184. // 处理duration单位问题
  185. const duration = getDuration(state.duration)
  186. instance.requestAnimationFrame(function() {
  187. // 设置菜单主体内容
  188. instance.setStyle({
  189. 'transition': 'transform ' + duration,
  190. 'transform': 'translateX(0px)',
  191. '-webkit-transform': 'translateX(0px)'
  192. })
  193. // 设置各个隐藏的按钮为收起的状态
  194. for (var i = len - 1; i >= 0; i--) {
  195. buttons[i].setStyle({
  196. 'transition': 'transform ' + duration,
  197. 'transform': 'translateX(0px)',
  198. '-webkit-transform': 'translateX(0px)'
  199. })
  200. }
  201. })
  202. setStatus('close', instance)
  203. }
  204. // show的状态发生变化
  205. function showChange(newValue, oldValue, ownerInstance, instance) {
  206. var state = instance.getState()
  207. if (state.disabled) return
  208. // 打开或关闭单元格
  209. if (newValue) {
  210. openSwipeAction(instance, ownerInstance)
  211. } else {
  212. closeSwipeAction(instance, ownerInstance)
  213. }
  214. }
  215. // 菜单尺寸发生变化
  216. function sizeChange(newValue, oldValue, ownerInstance, instance) {
  217. // wxs内的局部变量快照
  218. var state = instance.getState()
  219. state.disabled = newValue.disabled
  220. state.duration = newValue.duration
  221. state.show = newValue.show
  222. state.threshold = newValue.threshold
  223. state.buttons = newValue.buttons
  224. var len = state.buttons.length
  225. if (len) {
  226. var buttonsWidth = 0
  227. var buttons = newValue.buttons
  228. for (var i = 0; i < len; i++) {
  229. buttonsWidth += buttons[i].width
  230. }
  231. }
  232. state.buttonsWidth = buttonsWidth
  233. }
  234. module.exports = {
  235. touchstart: touchstart,
  236. touchmove: touchmove,
  237. touchend: touchend,
  238. sizeChange: sizeChange
  239. }