vue添加手势操作---用户6362579

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

方案一（推荐）

使用基于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>

参考资料

vue2-hammerhammer ---来自腾讯云社区的---用户6362579