touch.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. }
  20. if (e.touches && e.touches[0]) {
  21. return {
  22. x: e.touches[0].pageX,
  23. y: e.touches[0].pageY
  24. }
  25. }
  26. if (e.changedTouches && e.changedTouches[0]) {
  27. return {
  28. x: e.changedTouches[0].pageX,
  29. y: e.changedTouches[0].pageY
  30. }
  31. }
  32. return {
  33. x: e.clientX || 0,
  34. y: e.clientY || 0
  35. }
  36. },
  37. resetTouchStatus() {
  38. this.direction = ''
  39. this.deltaX = 0
  40. this.deltaY = 0
  41. this.offsetX = 0
  42. this.offsetY = 0
  43. },
  44. touchStart(event) {
  45. this.resetTouchStatus()
  46. const touch = this.getTouchPoint(event)
  47. this.startX = touch.x
  48. this.startY = touch.y
  49. },
  50. touchMove(event) {
  51. const touch = this.getTouchPoint(event)
  52. this.deltaX = touch.x - this.startX
  53. this.deltaY = touch.y - this.startY
  54. this.offsetX = Math.abs(this.deltaX)
  55. this.offsetY = Math.abs(this.deltaY)
  56. this.direction = this.direction || getDirection(this.offsetX, this.offsetY)
  57. }
  58. }
  59. }