网站备案 2016,产品界面设计,vmware做网站步骤,百度竞价推广一个月多少钱最近开发遇到了这个需求#xff0c;使用vue开发h5加一个手势放大缩小的功能#xff0c;移动端的手势操作用原生的写法太麻烦#xff0c;而且体验还不好#xff0c;所以从github找到一个hammer.js的一个手势操作插件。官方文档地址#xff1a;http://hammerjs.github.io/文…最近开发遇到了这个需求使用vue开发h5加一个手势放大缩小的功能移动端的手势操作用原生的写法太麻烦而且体验还不好所以从github找到一个hammer.js的一个手势操作插件。官方文档地址http://hammerjs.github.io/文档写的一般的看的不怎么明白又从网上查了一些别人做过的案例这个插件可以实现功能但是一些逻辑还是得自己写。实现手势缩放用到了插件的pinch翻译就是捏的意思使用也遇到一些坑。1、首先下载这个插件cnpm install hammerjs --save2、然后在使用的组件页面引入import Hammer from hammerjs3、初始化插件找到指定的dom节点。手势缩放默认是禁调的需要设置开启。4、手势缩放在pinch回调函数里面的e的对象里面封装了一个scale的属性就是代表这个缩放大小但是有一个问题每次缩放完毕之后再次缩放scale就会重置为1所以需要判断是不是第一次缩放记录缩放之后的值以相乘的方式进行比例缩放测试之后是可行的。更多功能参考官方文档。5、拖动用到了pan拖动有向上拖动panup向下拖动pandown向左拖动panleft向右拖动panright拖动开始panstart拖动结束panend拖动通过e.deltaXe.deltalY来计算移动的距离我用的是css3的translate拖动结束记录结束的delatX delatY在拖动的时候当前的的delatX delatY加上记录的delatX delatY这样就能实现无缝拖动。拖动不能影响缩放已经缩放在做东的时候也要把缩放加上。6双击连续点击两次doubletap之后还原拖动和缩放。this.$nextTick((){let x0;let y0;let _nodethis.$refs.main.querySelector(#pageContainerPageNumber);let handnew Hammer(_node);hand.get(pinch).set({enable:true});hand.on(pinchmove pinchstart pinchin pinchout,e {//缩放if(e.type pinchstart){this.scaleIndex this.scaleCount || 1;}this.scaleCount this.scaleIndex*e.scale;_node.style.transform scale( (this.scaleIndex * e.scale) )});hand.on(doubletap,(e){//双击x0;y0;this.scaleCount1;_node.style.transform translateX(0px) translateY(0px) scale(1);})hand.on(panright panleft panup pandown,(e){//拖动_node.style.transformtranslateX((e.deltaXx)px)translateY((e.deltaYy)px)scale( (this.scaleCount * e.scale) )})hand.on(panend,(e){xe.deltaXx;ye.deltaYy;})})
