zoukankan      html  css  js  c++  java
  • 移动端项目 添加 触屏 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;}

  • 相关阅读:
    递归和this指向
    作用域,闭包
    三种存储方式
    事件流,冒泡,捕获,事件委托
    centos添加登陆成功提示消息
    centos7下安装oracle11g R2报错
    linux下从home分区扩展到根分区
    linux下搭建mongodb副本集
    linux服务下使用nginx之后数据导出超时
    linux下搭建git服务器
  • 原文地址:https://www.cnblogs.com/caiCheryl/p/7512527.html
Copyright © 2011-2022 走看看