前言
用vue做移动端开发过程中,需要手势操作。因为vue-touch目前不支持vue2.0,所以自己写了几个手势。
实现功能
- 点击
- 双指缩放图片
- 移动
指令代码
1 | myTouch.js >> |
使用方法
1 | html: |
放大功能实现
1 | scalePic: function(param, is_endScale){ |
移动功能
1 | movePic: function(param){ |
计算最大位移
1 | setMaxdisp:function(changeSize, changeX, changeY, type){ |
遇到的问题
双指与单指容易混淆
在双指放大缩小的时候,两个手指松开时间不同,页面就会在两个手指松开的时候判断为点击事件。 这个还没有解决
计算图片位移程度
图片不能随意的位移。应该是在一定范围内去位移的,所以写了一个计算最大位移的函数,图片位移距离应该是图片刚好能看到的程度。通过图片原始的宽高,以及页面当前的宽度比例可以计算出当前图片在页面的高度。然后计算出最大位移
每次移动的基础位置
图片移动或者缩小懂应该是在一个基础数据上去增加减少,如果没有设置这个基础数据,会导致每次都是从1的比例来移动以及缩小,所以每次移动以及放大缩小图片之后,都要记录下来改变之后图片的参数,下次改变图片的时候都是在这个参数基础上去改变的。