这段时间研究了一下微信小程序,对小程序有了大概的了解,由于项目需要做一个虚拟摇杆,查了一下发现跟小程序相关的教程非常少,更别说是具体的一些功能实现如虚拟摇杆,所以还是自己动手做一个吧。
本教程适合对微信小程序有一些了解的新手,至于大神分分钟能实现自己想要的功能。虚拟摇杆成品如下:
OK,如果你觉得效果还行那就开始吧。我们可以先拆解虚拟摇杆的内容,一步一步实现,步骤如下:
手指拖动图片任意移动—给出一个圆形限定范围—松手返回中心点
就是这么简单,先实现第一步,拖动图片,查了一下微信小程序关于Image组件的api非常简单,好吧只能自己去其他地方查,功夫不负有心人,后来找到了Image组件的api,image组件包含三个触摸事件,分别为bindtap(触摸),bindtouchmove(触摸滑动),bindtouchend(触摸结束),知道了这个就非常简单了,我们写一下代码: