graceTouch.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
  3. <slot></slot>
  4. </view>
  5. </template>
  6. <script>
  7. export default{
  8. props:{
  9. datas:{type:Array, default:function(){return [];}}
  10. },
  11. data() {
  12. return {
  13. toucheTimer : 0,
  14. fingerRes : [],
  15. distance : 0
  16. }
  17. },
  18. methods:{
  19. toInt : function(arr){
  20. var res = [];
  21. arr.forEach((item)=>{
  22. item.pageX = parseInt(item.pageX);
  23. item.pageY = parseInt(item.pageY);
  24. res.push(item);
  25. });
  26. return res;
  27. },
  28. touchstart : function(e){
  29. this.fingerRes = this.toInt(e.touches);
  30. if(this.fingerRes.length > 2){return ;}
  31. this.toucheTimer = new Date().getTime();
  32. var moves = [], i = 0;
  33. this.fingerRes.forEach((finger)=>{
  34. var xTouch = finger.pageX;
  35. var yTouch = finger.pageY;
  36. moves.push([xTouch, yTouch]);
  37. i++;
  38. });
  39. this.$emit('thStart', moves, this.datas);
  40. },
  41. touchmove : function(e){
  42. var touches = this.toInt(e.touches);
  43. if(touches.length > 2){return ;}
  44. if(touches.length == 1){
  45. var i = 0, moves = [];
  46. touches.forEach((finger)=>{
  47. var xTouch = finger.pageX - this.fingerRes[i].pageX;
  48. var yTouch = finger.pageY - this.fingerRes[i].pageY;
  49. moves.push([xTouch, yTouch]);
  50. i++;
  51. });
  52. this.$emit('thMove', moves, this.datas);
  53. }
  54. else if(touches.length == 2){
  55. if(this.distance == 0){
  56. this.distance = parseInt(this.getDistance(touches[0].pageX,touches[0].pageY, touches[1].pageX, touches[1].pageY));
  57. }else{
  58. var distance1 = parseInt(this.getDistance(touches[0].pageX,touches[0].pageY, touches[1].pageX, touches[1].pageY));
  59. var scale = distance1 / this.distance;
  60. scale = Math.floor(scale * 100) / 100;
  61. this.$emit('scale', scale, this.datas);
  62. }
  63. }
  64. },
  65. touchend : function (e){
  66. var touches = this.toInt(e.changedTouches);
  67. this.distance = 0;
  68. if(touches.length == 1){
  69. var i = 0, moves = [];
  70. touches.forEach((finger)=>{
  71. var xTouch = finger.pageX - this.fingerRes[i].pageX;
  72. var yTouch = finger.pageY - this.fingerRes[i].pageY;
  73. moves.push([xTouch, yTouch]);
  74. i++;
  75. });
  76. var timer = new Date().getTime() - this.toucheTimer;
  77. moves.push(timer);
  78. this.$emit('thEnd', moves, this.datas);
  79. // 根据时间及距离决定滑动时间
  80. if(timer < 300){
  81. var mx = Math.abs(moves[0][0]);
  82. var my = Math.abs(moves[0][1]);
  83. if(mx > my){
  84. if(mx >= 50){
  85. if(moves[0][0] > 0){
  86. this.$emit('swipe', 'right', this.datas);
  87. }else{
  88. this.$emit('swipe', 'left', this.datas);
  89. }
  90. }
  91. }else{
  92. if(my >= 50){
  93. if(moves[0][1] > 0){
  94. this.$emit('swipe', 'down', this.datas);
  95. }else{
  96. this.$emit('swipe', 'up', this.datas);
  97. }
  98. }
  99. }
  100. }
  101. }
  102. },
  103. getDistance : function (lat1, lng1, lat2, lng2){
  104. var radLat1 = lat1*Math.PI / 180.0;
  105. var radLat2 = lat2*Math.PI / 180.0;
  106. var a = radLat1 - radLat2;
  107. var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
  108. var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
  109. s = s * 6378.137;
  110. return Math.round(s * 10000) / 10000;
  111. }
  112. }
  113. }
  114. </script>
  115. <style>
  116. </style>