微信小程序实现【点击 滑动 评分 评星（5星）】功能，以及一个小问题的解决

最近在学习使用微信小程序，在做一个商家评分功能的时候，遇到一个比较棘手的问题，要实现的需求是可以点击、滑动选择评分等级，点击这个好说，监听bindtap事件确定是哪个星星（图片）被点击了就行。

可是要做滑动效果的话，就要用到bindtouchmove事件，在事件里可以拿到当前手指触摸点相对于页面的坐标值。通过动态获取这个坐标值，就可以得到跟星星图片的相对位置，从而修改评分参数。原理很简单，可是在实现的过程中却遇到了问题。然后大量搜索研究，都搜索不到，很多的是安卓和IOS平台，有自己专门的方法可以实现，小程序里并没有（当然可能是我学的时间短，还没有发现。。）。

我先把正确的做法放出来，然后再说下错误的是哪部分。里边的原理还不清楚，不知道是不是一个bug，当然更可能的是我研究不深入（笑哭.jpg）。

为了尽可能全面清晰地描述，我加了很多标注，并尽量精简了页面的元素。

我用的方法是使用wxss文件手动设置页面星星的位置，当然也可以用 wx.createSelectorQuery() 这个API动态，更精准地获取信息，不过为了能突出功能的实现（也因为比较忙），这个方法被略去了，如果有需要，我后期可以添加这部分内容。

wxml文件：

<view >
  <block wx:for='{
    {scoreArray}}' wx:key='item' ><!-- 遍历评分列表 -->
    <!-- 设置触摸事件和点击事件为同一个方法,否则点击却不滑动的话,不触发事件 -->
    <view class='starLen' bindtouchmove='changeScore'  bindtap='changeScore' >
      <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->
      <!-- src部分可以这样写 src="{
   {score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}"  ，这样可以在js文件把fullStarUrl和nullStarUrl去掉 -->
      <image class='star' src="{