vue添加手势操作
在开发手机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>参考资料
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-04-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录