mpother.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. const MIN_DISTANCE = 10;
  2. export default {
  3. methods: {
  4. touchstart(e) {
  5. this._left = this.left
  6. this.stopTouchStart(e)
  7. },
  8. touchmove(e) {
  9. // 是否可以滑动页面
  10. this.stopTouchMove(e);
  11. if (this.direction == 'horizontal') {
  12. this.moveTo({
  13. deltaX: this.deltaX,
  14. deltaY: this.deltaY || 0,
  15. left: this._left + this.deltaX
  16. })
  17. }
  18. // FIXME: 冒泡
  19. return false
  20. },
  21. touchend() {
  22. this.moveEnd({
  23. velocity: Math.abs(this.deltaX / this.timing),
  24. direction: this.direction,
  25. deltaX: this.deltaX,
  26. deltaY: this.deltaY,
  27. })
  28. },
  29. stopTouchStart(event) {
  30. this.resetTouchStatus();
  31. const touch = event.touches[0];
  32. this.startTime = new Date().getTime();
  33. this.startX = touch.clientX;
  34. this.startY = touch.clientY;
  35. },
  36. stopTouchMove(event) {
  37. const touch = event.touches[0];
  38. this.timing = new Date().getTime() - this.startTime;
  39. this.deltaX = touch.clientX - this.startX;
  40. this.deltaY = touch.clientY - this.startY;
  41. this.offsetX = Math.abs(this.deltaX);
  42. this.offsetY = Math.abs(this.deltaY);
  43. this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
  44. },
  45. getDirection(x, y) {
  46. if (x > y && x > MIN_DISTANCE) {
  47. return 'horizontal';
  48. }
  49. if (y > x && y > MIN_DISTANCE) {
  50. return 'vertical';
  51. }
  52. return '';
  53. },
  54. resetTouchStatus() {
  55. this.direction = '';
  56. this.deltaX = 0;
  57. this.deltaY = 0;
  58. this.offsetX = 0;
  59. this.offsetY = 0;
  60. }
  61. }
  62. }