zoukankan      html  css  js  c++  java
  • vue添加手势操作

    在开发手机web页面时希望我的网页也可以像App一样可以左右滑动进行操作。如果你也和我的想法一样,你就可以复制我的代码了,一天的工作量又可以划水7小时。


    方案一(不推荐了,有坑,表现为:如果页面有滚动条,并且添加了v-hammer:swipe.right,页面无法滚动)

    使用基于vue封装的vue2-hammer

    1. 安装包
    npm install vue2-hammer
    
    1. 引用包
    import { VueHammer } from 'vue2-hammer'
    Vue.use(VueHammer)
    
    1. 使用
    <a v-hammer:tap="onTap">Tap me!</a>
    
    <div v-hammer:swipe.left="onSwipeLeft">Swipe me!</div>
    
    <div v-hammer:swipe.left="(event)=> onSwipeLeft(event, item, i)">Swipe me!</div>
    <script>
      onSwipeLeft() {
          //这里写上你想干的事情。。。
          console.log("huahuahua!");
      }
    </script>
    

    方案二

    使用原生的hammer

    1. 安装包
    npm install --save hammerjs
    
    1. 引用包
    import Hammer from "hammerjs";
    
    1. 使用
    <div class="square"></div>
    <script>
      hammer = null;
      //vue的updated钩子函数
      updated() {
        /*要把document.querySelector放到updated中,否则可能dom还没渲染,就获取不到,你也可放在monted中使用定时器循环获取*/
        let square = document.querySelector(".square");
        if (!square || !!this.hammer) {
          return;
        }
        // Create an instance of Hammer with the reference.
        this.hammer = new Hammer(square);
        this.hammer.on("swiperight", function(e) {
          //这里写上你想干的事情。。。
          console.log("huahuahua!");
        });
      }
    </script>
    

    参考资料

  • 相关阅读:
    angular6 增加webpack配置 亲测可用
    Git 忽略提交 .gitignore
    pc 媒体查询
    angular vue通过node启动项目局域网内关闭防火墙无法访问的解决办法
    js判断isNumber(obj)
    hook
    javascript中this的四种用法
    JavaScript中闭包函数
    JavaScript(ES3)中的方法, 及bind apply call的使用
    ES6 箭头函数
  • 原文地址:https://www.cnblogs.com/missile/p/12768521.html
Copyright © 2011-2022 走看看