微信小程序之虚拟摇杆练习

这段时间研究了一下微信小程序，对小程序有了大概的了解，由于项目需要做一个虚拟摇杆，查了一下发现跟小程序相关的教程非常少，更别说是具体的一些功能实现如虚拟摇杆，所以还是自己动手做一个吧。

本教程适合对微信小程序有一些了解的新手，至于大神分分钟能实现自己想要的功能。虚拟摇杆成品如下：

OK，如果你觉得效果还行那就开始吧。我们可以先拆解虚拟摇杆的内容，一步一步实现，步骤如下：

手指拖动图片任意移动—给出一个圆形限定范围—松手返回中心点

就是这么简单，先实现第一步，拖动图片，查了一下微信小程序关于Image组件的api非常简单，好吧只能自己去其他地方查，功夫不负有心人，后来找到了Image组件的api，image组件包含三个触摸事件，分别为bindtap（触摸），bindtouchmove（触摸滑动），bindtouchend（触摸结束），知道了这个就非常简单了，我们写一下代码：

<image left:{
  
  {leftLooks}}px;top:{
  
  {topLooks}}px;" bindtouchend='ImageReturn' bindtouchmove='ImageTouchMove' bindtap="ImageTouch"  src=".