移动端项目 添加 触屏 swipe事件[记录]

Posted 2020-10-06 丶七月小先生丶

avalon 触屏 事件　

　　tap, longtap, doubletap
　　swipe, swipeleft, swiperight,swipedown,swipeup
　　pinch, pinchstart,pinchend,pinchin,pinchout
　　drag,dragstart,dragend,
　　rotate,rotatestart,rotateend

移动端 触屏事件添加 测试  （https://segmentfault.com/a/1190000006012676）

　　挑选用到的模块加 例如  swipe  ----  require 进入

　　ms-on-swipe="@fn" （@fnTest($event)）

　　fn: function(e){ console.log(e) }

　　fnSwipeLeft:function(e){ if(e.originalEvent.direction=="left") mstestTouch.swipeLeftFn(e); },

　　slideWrap.style.left =-(index+1)*100+"%";

移动端 双击  （两个单击 时间<0.5）

　　var backSecond = 0;

　　var curSecond = new Date().getSeconds();
　　if (Math.abs(curSecond - backSecond) > 0.5) {
　　　　backSecond = curSecond;
　　} else {
　　　　this.isDoubleClick="双击666";
　　　　setTimeout(function () {
　　　　　　mstestTouch.isDoubleClick="点击我进行双击";
　　　　},1500);
　　}
　　//禁止事件冒泡
　　event.stopPropagation();

　　

移动端 点击问题

　　网页端 用 ms-on-click

　　手机端 用 ms-on-tap （tap 代替 click ）click会不好用  

　　自己写的双击出问题  暂时  添加a 

　　　　<li><a href="javascript:void(0)" ms-on-tap="@fnDoubleClick($event)">手势手机a--{{@isDoubleClick}}</a></li>

移动端 延迟300秒问题

　　禁止缩放 viewport

 

avalon获取所操作的该元素

　　<li ms-on-tap="@fnSwipeLeft">向左滑动，显示下一页</li>

　　fnSwipeLeft: function(e) {var target = e.target;}