mpalipay.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. export default {
  2. data() {
  3. return {
  4. isshow: false,
  5. viewWidth: 0,
  6. buttonWidth: 0,
  7. disabledView: false,
  8. x: 0,
  9. transition: false
  10. }
  11. },
  12. watch: {
  13. show(newVal) {
  14. if (this.autoClose) return
  15. if (newVal) {
  16. this.open()
  17. } else {
  18. this.close()
  19. }
  20. },
  21. },
  22. created() {
  23. if (this.swipeaction.children !== undefined) {
  24. this.swipeaction.children.push(this)
  25. }
  26. },
  27. beforeDestroy() {
  28. this.swipeaction.children.forEach((item, index) => {
  29. if (item === this) {
  30. this.swipeaction.children.splice(index, 1)
  31. }
  32. })
  33. },
  34. mounted() {
  35. this.isopen = false
  36. this.transition = true
  37. setTimeout(() => {
  38. this.getQuerySelect()
  39. }, 50)
  40. },
  41. methods: {
  42. onClick(index, item) {
  43. this.$emit('click', {
  44. content: item,
  45. index
  46. })
  47. },
  48. touchstart(e) {
  49. let {
  50. pageX,
  51. pageY
  52. } = e.changedTouches[0]
  53. this.transition = false
  54. this.startX = pageX
  55. if (this.autoClose) {
  56. this.swipeaction.closeOther(this)
  57. }
  58. },
  59. touchmove(e) {
  60. let {
  61. pageX,
  62. } = e.changedTouches[0]
  63. this.slide = this.getSlide(pageX)
  64. if (this.slide === 0) {
  65. this.disabledView = false
  66. }
  67. },
  68. touchend(e) {
  69. this.stop = false
  70. this.transition = true
  71. if (this.isopen) {
  72. if (this.moveX === -this.buttonWidth) {
  73. this.close()
  74. return
  75. }
  76. this.move()
  77. } else {
  78. if (this.moveX === 0) {
  79. this.close()
  80. return
  81. }
  82. this.move()
  83. }
  84. },
  85. open() {
  86. this.x = this.moveX
  87. this.$nextTick(() => {
  88. this.x = -this.buttonWidth
  89. this.moveX = this.x
  90. if(!this.isopen){
  91. this.isopen = true
  92. this.$emit('change', true)
  93. }
  94. })
  95. },
  96. close() {
  97. this.x = this.moveX
  98. this.$nextTick(() => {
  99. this.x = 0
  100. this.moveX = this.x
  101. if(this.isopen){
  102. this.isopen = false
  103. this.$emit('change', false)
  104. }
  105. })
  106. },
  107. move() {
  108. if (this.slide === 0) {
  109. this.open()
  110. } else {
  111. this.close()
  112. }
  113. },
  114. onChange(e) {
  115. let x = e.detail.x
  116. this.moveX = x
  117. if (x >= this.buttonWidth) {
  118. this.disabledView = true
  119. this.$nextTick(() => {
  120. this.x = this.buttonWidth
  121. })
  122. }
  123. },
  124. getSlide(x) {
  125. if (x >= this.startX) {
  126. this.startX = x
  127. return 1
  128. } else {
  129. this.startX = x
  130. return 0
  131. }
  132. },
  133. getQuerySelect() {
  134. const query = uni.createSelectorQuery().in(this);
  135. query.selectAll('.viewWidth-hook').boundingClientRect(data => {
  136. this.viewWidth = data[0].width
  137. this.buttonWidth = data[1].width
  138. this.transition = false
  139. this.$nextTick(() => {
  140. this.transition = true
  141. })
  142. if (!this.buttonWidth) {
  143. this.disabledView = true
  144. }
  145. if (this.autoClose) return
  146. if (this.show) {
  147. this.open()
  148. }
  149. }).exec();
  150. }
  151. }
  152. }