mpalipay.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. export default {
  2. data() {
  3. return {
  4. x: 0,
  5. transition: false,
  6. width: 0,
  7. viewWidth: 0,
  8. swipeShow: 0
  9. }
  10. },
  11. watch: {
  12. show(newVal) {
  13. if (this.autoClose) return
  14. if (newVal && newVal !== 'none') {
  15. this.transition = true
  16. this.open(newVal)
  17. } else {
  18. this.close()
  19. }
  20. }
  21. },
  22. created() {
  23. this.swipeaction = this.getSwipeAction()
  24. if (this.swipeaction.children !== undefined) {
  25. this.swipeaction.children.push(this)
  26. }
  27. },
  28. mounted() {
  29. this.isopen = false
  30. setTimeout(() => {
  31. this.getQuerySelect()
  32. }, 50)
  33. },
  34. methods: {
  35. appTouchStart(e) {
  36. const {
  37. clientX
  38. } = e.changedTouches[0]
  39. this.clientX = clientX
  40. this.timestamp = new Date().getTime()
  41. },
  42. appTouchEnd(e, index, item, position) {
  43. const {
  44. clientX
  45. } = e.changedTouches[0]
  46. // fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
  47. let diff = Math.abs(this.clientX - clientX)
  48. let time = (new Date().getTime()) - this.timestamp
  49. if (diff < 40 && time < 300) {
  50. this.$emit('click', {
  51. content: item,
  52. index,
  53. position
  54. })
  55. }
  56. },
  57. /**
  58. * 移动触发
  59. * @param {Object} e
  60. */
  61. onChange(e) {
  62. this.moveX = e.detail.x
  63. this.isclose = false
  64. },
  65. touchstart(e) {
  66. this.transition = false
  67. this.isclose = true
  68. this.autoClose && this.swipeaction.closeOther(this)
  69. },
  70. touchmove(e) {},
  71. touchend(e) {
  72. // 0的位置什么都不执行
  73. if (this.isclose && this.isopen === 'none') return
  74. if (this.isclose && this.isopen !== 'none') {
  75. this.transition = true
  76. this.close()
  77. } else {
  78. this.move(this.moveX + this.leftWidth)
  79. }
  80. },
  81. /**
  82. * 移动
  83. * @param {Object} moveX
  84. */
  85. move(moveX) {
  86. // 打开关闭的处理逻辑不太一样
  87. this.transition = true
  88. // 未打开状态
  89. if (!this.isopen || this.isopen === 'none') {
  90. if (moveX > this.threshold) {
  91. this.open('left')
  92. } else if (moveX < -this.threshold) {
  93. this.open('right')
  94. } else {
  95. this.close()
  96. }
  97. } else {
  98. if (moveX < 0 && moveX < this.rightWidth) {
  99. const rightX = this.rightWidth + moveX
  100. if (rightX < this.threshold) {
  101. this.open('right')
  102. } else {
  103. this.close()
  104. }
  105. } else if (moveX > 0 && moveX < this.leftWidth) {
  106. const leftX = this.leftWidth - moveX
  107. if (leftX < this.threshold) {
  108. this.open('left')
  109. } else {
  110. this.close()
  111. }
  112. }
  113. }
  114. },
  115. /**
  116. * 打开
  117. */
  118. open(type) {
  119. this.x = this.moveX
  120. this.animation(type)
  121. },
  122. /**
  123. * 关闭
  124. */
  125. close() {
  126. this.x = this.moveX
  127. // TODO 解决 x 值不更新的问题,所以会多触发一次 nextTick ,待优化
  128. this.$nextTick(() => {
  129. this.x = -this.leftWidth
  130. if (this.isopen !== 'none') {
  131. this.$emit('change', 'none')
  132. }
  133. this.isopen = 'none'
  134. })
  135. },
  136. /**
  137. * 执行结束动画
  138. * @param {Object} type
  139. */
  140. animation(type) {
  141. this.$nextTick(() => {
  142. if (type === 'left') {
  143. this.x = 0
  144. } else {
  145. this.x = -this.rightWidth - this.leftWidth
  146. }
  147. if (this.isopen !== type) {
  148. this.$emit('change', type)
  149. }
  150. this.isopen = type
  151. })
  152. },
  153. getSlide(x) {},
  154. getQuerySelect() {
  155. const query = uni.createSelectorQuery().in(this);
  156. query.selectAll('.movable-view--hock').boundingClientRect(data => {
  157. this.leftWidth = data[1].width
  158. this.rightWidth = data[2].width
  159. this.width = data[0].width
  160. this.viewWidth = this.width + this.rightWidth + this.leftWidth
  161. if (this.leftWidth === 0) {
  162. // TODO 疑似bug ,初始化的时候如果x 是0,会导致移动位置错误,所以让元素超出一点
  163. this.x = -0.1
  164. } else {
  165. this.x = -this.leftWidth
  166. }
  167. this.moveX = this.x
  168. this.$nextTick(() => {
  169. this.swipeShow = 1
  170. })
  171. if (!this.buttonWidth) {
  172. this.disabledView = true
  173. }
  174. if (this.autoClose) return
  175. if (this.show !== 'none') {
  176. this.transition = true
  177. this.open(this.shows)
  178. }
  179. }).exec();
  180. }
  181. }
  182. }