nvue - backup.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. // nvue操作dom的库,用于获取dom的尺寸信息
  2. const dom = uni.requireNativePlugin('dom')
  3. // nvue中用于操作元素动画的库,类似于uni.animation,只不过uni.animation不能用于nvue
  4. const animation = uni.requireNativePlugin('animation')
  5. export default {
  6. data() {
  7. return {
  8. // 是否滑动中
  9. moving: false,
  10. // 状态,open-打开状态,close-关闭状态
  11. status: 'close',
  12. // 开始触摸点的X和Y轴坐标
  13. startX: 0,
  14. startY: 0,
  15. // 所有隐藏按钮的尺寸信息数组
  16. buttons: [],
  17. // 所有按钮的总宽度
  18. buttonsWidth: 0,
  19. // 记录上一次移动的位置值
  20. moveX: 0,
  21. // 记录上一次滑动的位置,用于前后两次做对比,如果移动的距离小于某一阈值,则认为前后之间没有移动,为了解决可能存在的通信阻塞问题
  22. lastX: 0
  23. }
  24. },
  25. computed: {
  26. // 获取过渡时间
  27. getDuratin() {
  28. let duration = String(this.duration)
  29. // 如果ms为单位,返回ms的数值部分
  30. if (duration.indexOf('ms') >= 0) return parseInt(duration)
  31. // 如果s为单位,为了得到ms的数值,需要乘以1000
  32. if (duration.indexOf('s') >= 0) return parseInt(duration) * 1000
  33. // 如果值传了数值,且小于30,认为是s单位
  34. duration = Number(duration)
  35. return duration < 30 ? duration * 1000 : duration
  36. }
  37. },
  38. watch: {
  39. show: {
  40. immediate: true,
  41. handler(n) {
  42. // if(n === true) {
  43. // uni.$u.sleep(50).then(() => {
  44. // this.openSwipeAction()
  45. // })
  46. // } else {
  47. // this.closeSwipeAction()
  48. // }
  49. }
  50. }
  51. },
  52. mounted() {
  53. uni.$u.sleep(20).then(() => {
  54. this.queryRect()
  55. })
  56. },
  57. methods: {
  58. close() {
  59. this.closeSwipeAction()
  60. },
  61. // 触摸单元格
  62. touchstart(event) {
  63. if (this.disabled) return
  64. this.closeOther()
  65. const { touches } = event
  66. // 记录触摸开始点的坐标值
  67. this.startX = touches[0].pageX
  68. this.startY = touches[0].pageY
  69. },
  70. // // 触摸滑动
  71. touchmove(event) {
  72. if (this.disabled) return
  73. const { touches } = event
  74. const { pageX } = touches[0]
  75. const { pageY } = touches[0]
  76. let moveX = pageX - this.startX
  77. const moveY = pageY - this.startY
  78. const { buttonsWidth } = this
  79. const len = this.buttons.length
  80. // 判断前后两次的移动距离,如果小于一定值,则不进行移动处理
  81. if (Math.abs(pageX - this.lastX) < 0.3) return
  82. this.lastX = pageX
  83. // 移动的X轴距离大于Y轴距离,也即终点与起点位置连线,与X轴夹角小于45度时,禁止页面滚动
  84. if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.threshold) {
  85. event.stopPropagation()
  86. }
  87. // 如果移动的X轴距离小于Y轴距离,也即终点位置与起点位置连线,与Y轴夹角小于45度时,认为是页面上下滑动,而不是左右滑动单元格
  88. if (Math.abs(moveX) < Math.abs(moveY)) return
  89. // 限制右滑的距离,不允许内容部分往右偏移,右滑会导致X轴偏移值大于0,以此做判断
  90. // 此处不能直接return,因为滑动过程中会缺失某些关键点坐标,会导致错乱,最好的办法就是
  91. // 在超出后,设置为0
  92. if (this.status === 'open') {
  93. // 在开启状态下,向左滑动,需忽略
  94. if (moveX < 0) moveX = 0
  95. // 想要收起菜单,最大能移动的距离为按钮的总宽度
  96. if (moveX > buttonsWidth) moveX = buttonsWidth
  97. // 如果是已经打开了的状态,向左滑动时,移动收起菜单
  98. this.moveSwipeAction(-buttonsWidth + moveX)
  99. } else {
  100. // 关闭状态下,右滑动需忽略
  101. if (moveX > 0) moveX = 0
  102. // 滑动的距离不允许超过所有按钮的总宽度,此时只能是左滑,最终设置按钮的总宽度,同时为负数
  103. if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
  104. // 只要是在滑过程中,就不断移动菜单的内容部分,从而使隐藏的菜单显示出来
  105. this.moveSwipeAction(moveX)
  106. }
  107. },
  108. // 单元格结束触摸
  109. touchend(event) {
  110. if (this.disabled) return
  111. const touches = event.changedTouches ? event.changedTouches[0] : {}
  112. const { pageX } = touches
  113. const { pageY } = touches
  114. const { buttonsWidth } = this
  115. this.moveX = pageX - this.startX
  116. if (this.status === 'open') {
  117. // 在展开的状态下,继续左滑,无需操作
  118. if (this.moveX < 0) this.moveX = 0
  119. if (this.moveX > buttonsWidth) this.moveX = buttonsWidth
  120. // 在开启状态下,点击一下内容区域,moveX为0,也即没有进行移动,这时执行收起菜单逻辑
  121. if (this.moveX === 0) {
  122. return this.closeSwipeAction()
  123. }
  124. // 在开启状态下,滑动距离小于阈值,则默认为不关闭,同时恢复原来的打开状态
  125. if (Math.abs(this.moveX) < this.threshold) {
  126. this.openSwipeAction()
  127. } else {
  128. // 如果滑动距离大于阈值,则执行收起逻辑
  129. this.closeSwipeAction()
  130. }
  131. } else {
  132. // 在关闭的状态下,右滑,无需操作
  133. if (this.moveX >= 0) this.moveX = 0
  134. if (this.moveX <= -buttonsWidth) this.moveX = -buttonsWidth
  135. // 理由同上
  136. if (Math.abs(this.moveX) < this.threshold) {
  137. this.closeSwipeAction()
  138. } else {
  139. this.openSwipeAction()
  140. }
  141. }
  142. },
  143. // 移动滑动选择器内容区域,同时显示出其隐藏的菜单
  144. moveSwipeAction(moveX) {
  145. if (this.moving) return
  146. this.moving = true
  147. let previewButtonsMoveX = 0
  148. const len = this.buttons.length
  149. animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
  150. styles: {
  151. transform: `translateX(${moveX}px)`
  152. },
  153. timingFunction: 'linear'
  154. }, () => {
  155. this.moving = false
  156. })
  157. // 按钮的组的长度
  158. for (let i = len - 1; i >= 0; i--) {
  159. const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
  160. // 通过比例,得出元素自身该移动的距离
  161. const translateX = this.buttons[i].width / this.buttonsWidth * moveX
  162. // 最终移动的距离,是通过自身比例算出的距离,再加上在它之前所有按钮移动的距离之和
  163. const realTranslateX = translateX + previewButtonsMoveX
  164. animation.transition(buttonRef, {
  165. styles: {
  166. transform: `translateX(${realTranslateX}px)`
  167. },
  168. duration: 0,
  169. delay: 0,
  170. timingFunction: 'linear'
  171. }, () => {})
  172. // 记录本按钮之前的所有按钮的移动距离之和
  173. previewButtonsMoveX += translateX
  174. }
  175. },
  176. // 关闭菜单
  177. closeSwipeAction() {
  178. if (this.status === 'close') return
  179. this.moving = true
  180. const { buttonsWidth } = this
  181. animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
  182. styles: {
  183. transform: 'translateX(0px)'
  184. },
  185. duration: this.getDuratin,
  186. timingFunction: 'ease-in-out'
  187. }, () => {
  188. this.status = 'close'
  189. this.moving = false
  190. this.closeHandler()
  191. })
  192. // 按钮的组的长度
  193. const len = this.buttons.length
  194. for (let i = len - 1; i >= 0; i--) {
  195. const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
  196. // 如果不满足边界条件,返回
  197. if (this.buttons.length === 0 || !this.buttons[i] || !this.buttons[i].width) return
  198. animation.transition(buttonRef, {
  199. styles: {
  200. transform: 'translateX(0px)'
  201. },
  202. duration: this.getDuratin,
  203. timingFunction: 'ease-in-out'
  204. }, () => {})
  205. }
  206. },
  207. // 打开菜单
  208. openSwipeAction() {
  209. if (this.status === 'open') return
  210. this.moving = true
  211. const buttonsWidth = -this.buttonsWidth
  212. let previewButtonsMoveX = 0
  213. animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
  214. styles: {
  215. transform: `translateX(${buttonsWidth}px)`
  216. },
  217. duration: this.getDuratin,
  218. timingFunction: 'ease-in-out'
  219. }, () => {
  220. this.status = 'open'
  221. this.moving = false
  222. this.openHandler()
  223. })
  224. // 按钮的组的长度
  225. const len = this.buttons.length
  226. for (let i = len - 1; i >= 0; i--) {
  227. const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
  228. // 如果不满足边界条件,返回
  229. if (this.buttons.length === 0 || !this.buttons[i] || !this.buttons[i].width) return
  230. // 通过比例,得出元素自身该移动的距离
  231. const translateX = this.buttons[i].width / this.buttonsWidth * buttonsWidth
  232. // 最终移动的距离,是通过自身比例算出的距离,再加上在它之前所有按钮移动的距离之和
  233. const realTranslateX = translateX + previewButtonsMoveX
  234. animation.transition(buttonRef, {
  235. styles: {
  236. transform: `translateX(${realTranslateX}px)`
  237. },
  238. duration: this.getDuratin,
  239. timingFunction: 'ease-in-out'
  240. }, () => {})
  241. previewButtonsMoveX += translateX
  242. }
  243. },
  244. // 查询按钮节点信息
  245. queryRect() {
  246. // 历遍所有按钮数组,通过getRectByDom返回一个promise
  247. const promiseAll = this.rightOptions.map((item, index) => this.getRectByDom(this.$refs[`u-swipe-action-item__right__button-${index}`][0]))
  248. // 通过promise.all方法,让所有按钮的查询结果返回一个数组的形式
  249. Promise.all(promiseAll).then((sizes) => {
  250. this.buttons = sizes
  251. // 计算所有按钮总宽度
  252. this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0)
  253. })
  254. },
  255. // 通过nvue的dom模块,查询节点信息
  256. getRectByDom(ref) {
  257. return new Promise((resolve) => {
  258. dom.getComponentRect(ref, (res) => {
  259. resolve(res.size)
  260. })
  261. })
  262. }
  263. }
  264. }