touch.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. const MIN_DISTANCE = 10
  2. function getDirection(x, y) {
  3. if (x > y && x > MIN_DISTANCE) {
  4. return 'horizontal'
  5. }
  6. if (y > x && y > MIN_DISTANCE) {
  7. return 'vertical'
  8. }
  9. return ''
  10. }
  11. export default {
  12. methods: {
  13. getTouchPoint(e) {
  14. if (!e) {
  15. return {
  16. x: 0,
  17. y: 0
  18. }
  19. } if (e.touches && e.touches[0]) {
  20. return {
  21. x: e.touches[0].pageX,
  22. y: e.touches[0].pageY
  23. }
  24. } if (e.changedTouches && e.changedTouches[0]) {
  25. return {
  26. x: e.changedTouches[0].pageX,
  27. y: e.changedTouches[0].pageY
  28. }
  29. }
  30. return {
  31. x: e.clientX || 0,
  32. y: e.clientY || 0
  33. }
  34. },
  35. resetTouchStatus() {
  36. this.direction = ''
  37. this.deltaX = 0
  38. this.deltaY = 0
  39. this.offsetX = 0
  40. this.offsetY = 0
  41. },
  42. touchStart(event) {
  43. this.resetTouchStatus()
  44. const touch = this.getTouchPoint(event)
  45. this.startX = touch.x
  46. this.startY = touch.y
  47. },
  48. touchMove(event) {
  49. const touch = this.getTouchPoint(event)
  50. this.deltaX = touch.x - this.startX
  51. this.deltaY = touch.y - this.startY
  52. this.offsetX = Math.abs(this.deltaX)
  53. this.offsetY = Math.abs(this.deltaY)
  54. this.direction = this.direction || getDirection(this.offsetX, this.offsetY)
  55. }
  56. }
  57. }