vue添加手势操作

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

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

使用基于vue封装的vue2-hammer

安装包

npm install vue2-hammer

引用包

  
import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)

使用

  
<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

安装包

npm install --save hammerjs

引用包

  
import Hammer from "hammerjs";

使用

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

参考资料

本文会经常更新，请阅读原文： https://dashenxian.github.io/post/vue%E6%B7%BB%E5%8A%A0%E6%89%8B%E5%8A%BF%E6%93%8D%E4%BD%9C ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名小神仙（包含链接： https://dashenxian.github.io ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 (125880321@qq.com) 。