手机真是火得不行，好多小伙伴都在学怎么用手指滑动搞定各种功能。想知道怎么玩转Vue项目里的手势吗？别急，跟我一起来瞧瞧。只需要装上一个Hammerjs这个实用的第三方库就OK了。这边还有详细的实操教程，保证看完后你能轻松运用到自家的Vue项目中去！
引入hammerjs库
别忘了，要在手机上搞点啥，那可需要个厉害的小程序！那我来给你们介绍个超级棒的库Hammerjs。好东西安装起来当然不麻烦，只要去npm里搜索Hammerjs，装完扔进你的那个Vue项目就能用了~然后，就可以玩儿啦!
初始化hammerjs并添加手势操作
让Vue组件驾驭手势？交给HammerJS来搞定！只需在组件文件里学个import语句，导入HammerJS库即可。
javascript 引进Hammer，它来自'hammerjs'.
npm install hammerjs
把东西都装好了(样子跟新买时一样)，赶紧运行Hammerjs，然后做点手势控制就成了。比如说嘛：
mounted(){
咱们创建了一个”hammer”变量，记录了刚刚找到的那个DOM元素$el。接下来就可以用这个新的Hammer对象来搞定！
hammer.on(‘swipe’,(e)=>{
“说说最近都去哪玩？有意思的地方？”, console.log(“咪咕哥们儿，咱聊聊你这趟滑行到底在哪儿”)+e.direction;
});
}
搞定了组件里的那个叫’this.$el’的东西后，用Hammer创建一个实例并放到里面。接着的话，用Hammer的on()方法加上了滑动手势（swipe）功能。接着拖动手指，swipe事件和回调函数就开始工作，帮你搞定整个滑动过程。最后，他们只会打印出滑动的方向在浏览器的控制台上！
import Hammer from 'hammerjs';
支持其他常见手势操作
搭个网站得超炫？HammerJS就是个神兵利器，功能多得数不清，不仅能轻松滑屏，还可随意调节大小、旋转啥的。想怎么添功能就添呗，啥时加都行，相当方便！要搞个缩放功能么，抓住如下几句套上去就能用啦：
快来试试滑动缩放功能！只需要点击那个”启用”按钮让它变成真的即可~
hammer.on(‘pinch’,(e)=>{
看这儿，这个弯弯绕的设置正合适！(console.log(“挤压比值:”+e.scale))
只要搞定这几行代码，Vue组件就能探测和响应缩放手势了！
export default {
mounted() {
// 获取组件的DOM元素
const element = this.$el;
// 创建一个hammer实例
const hammer = new Hammer(element);
// 添加滑动手势
hammer.on('swipe', (event) => {
// 处理滑动事件
console.log('滑动方向：', event.direction);
});
}
}
协调触摸事件
你要玩手机手指操控吗？那就试试HammerJS和Vue组件的手势功能！什么时候加入都随你喜欢，不过千万别忘了在$().ready(function(){});那里插入。
想用手势控制？直接把hammer组件加到Vue里就行！有了这个小玩意儿，每个手势的意思你都了解了，也能根据需要来处理！
提升用户体验
说点实在的，你晓得用手势操纵手机应用有多棒吗？就像跟老友聊天似的随性，想动哪儿就动哪儿。要让这种事儿成真，只需用vue+hammerjs这套绝配组合，分分钟搞定各种触摸命令！
总结与展望
看了这篇文章，你就能知道怎么在Vue里玩手指头！用上Hammer.js这个妙人儿，简单几步就能用Vue组件打造各种手势。现在做软件，要懂得用这些挑剔的手势让客户满意。
评论0