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

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

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;}

posted @ 2017-09-12 22:19  丶七月小先生丶  阅读(377)  评论(0编辑  收藏  举报