mpother.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. // #ifdef APP-NVUE
  2. const dom = weex.requireModule('dom');
  3. // #endif
  4. export default {
  5. data() {
  6. return {
  7. uniShow: false,
  8. left: 0
  9. }
  10. },
  11. computed: {
  12. moveLeft() {
  13. return `translateX(${this.left}px)`
  14. }
  15. },
  16. watch: {
  17. show(newVal) {
  18. if (!this.position || JSON.stringify(this.position) === '{}') return;
  19. if (this.autoClose) return
  20. if (newVal) {
  21. this.$emit('change', true)
  22. this.open()
  23. } else {
  24. this.$emit('change', false)
  25. this.close()
  26. }
  27. uni.$emit('__uni__swipe__event', this)
  28. }
  29. },
  30. mounted() {
  31. this.position = {}
  32. this.init()
  33. setTimeout(()=>{
  34. this.getSelectorQuery()
  35. },100)
  36. },
  37. beforeDestoy() {
  38. uni.$off('__uni__swipe__event')
  39. },
  40. methods: {
  41. init() {
  42. uni.$on('__uni__swipe__event', (res) => {
  43. if (res !== this && this.autoClose) {
  44. if (this.left !== 0) {
  45. this.close()
  46. }
  47. }
  48. })
  49. },
  50. onClick(index, item) {
  51. this.$emit('click', {
  52. content: item,
  53. index
  54. })
  55. },
  56. touchstart(e) {
  57. const {
  58. pageX
  59. } = e.touches[0]
  60. if (this.disabled) return
  61. const left = this.position.content.left
  62. uni.$emit('__uni__swipe__event', this)
  63. this.width = pageX - left
  64. if (this.isopen) return
  65. if (this.uniShow) {
  66. this.uniShow = false
  67. this.isopen = true
  68. this.openleft = this.left + this.position.button.width
  69. }
  70. },
  71. touchmove(e, index) {
  72. if (this.disabled) return
  73. const {
  74. pageX
  75. } = e.touches[0]
  76. this.setPosition(pageX)
  77. },
  78. touchend() {
  79. if (this.disabled) return
  80. if (this.isopen) {
  81. this.move(this.openleft, 0)
  82. return
  83. }
  84. this.move(this.left, -40)
  85. },
  86. setPosition(x, y) {
  87. if (!this.position.button.width) {
  88. return
  89. }
  90. // this.left = x - this.width
  91. this.setValue(x - this.width)
  92. },
  93. setValue(value) {
  94. // 设置最大最小值
  95. this.left = Math.max(-this.position.button.width, Math.min(parseInt(value), 0))
  96. this.position.content.left = this.left
  97. if (this.isopen) {
  98. this.openleft = this.left + this.position.button.width
  99. }
  100. },
  101. move(left, value) {
  102. if (left >= value) {
  103. this.$emit('change', false)
  104. this.close()
  105. } else {
  106. this.$emit('change', true)
  107. this.open()
  108. }
  109. },
  110. open() {
  111. this.uniShow = true
  112. this.left = -this.position.button.width
  113. this.setValue(-this.position.button.width)
  114. },
  115. close() {
  116. this.uniShow = true
  117. this.setValue(0)
  118. setTimeout(() => {
  119. this.uniShow = false
  120. this.isopen = false
  121. }, 300)
  122. },
  123. getSelectorQuery() {
  124. // #ifndef APP-NVUE
  125. const views = uni.createSelectorQuery()
  126. .in(this)
  127. views
  128. .selectAll('.selector-query-hock')
  129. .boundingClientRect(data => {
  130. this.position.content = data[1]
  131. this.position.button = data[0]
  132. if (this.autoClose) return
  133. if (this.show) {
  134. this.open()
  135. } else {
  136. this.close()
  137. }
  138. })
  139. .exec()
  140. // #endif
  141. // #ifdef APP-NVUE
  142. dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
  143. if (this.position.content) return
  144. this.position.content = data.size
  145. })
  146. dom.getComponentRect(this.$refs['selector-button-hock'], (data) => {
  147. if (this.position.button) return
  148. this.position.button = data.size
  149. if (this.autoClose) return
  150. if (this.show) {
  151. this.open()
  152. } else {
  153. this.close()
  154. }
  155. })
  156. // #endif
  157. }
  158. }
  159. }