微信⼩程序实现【点击滑动评分评星（5星）】功能，以及⼀个⼩问题的解决
最近在学习使⽤微信⼩程序，在做⼀个商家评分功能的时候，遇到⼀个⽐较棘⼿的问题，要实现的需求是可以点击、滑动选择评分等级，点击这个好说，监听bindtap事件确定是哪个星星（图⽚）被点击了就⾏。
可是要做滑动效果的话，就要⽤到bindtouchmove事件，在事件⾥可以拿到当前⼿指触摸点相对于页⾯的坐标值。通过动态获取这个坐标值，就可以得到跟星星图⽚的相对位置，从⽽修改评分参数。原理很简单，可是在实现的过程中却遇到了问题。然后⼤量搜索研究，都搜索不到，很多的是安卓和IOS平台，有⾃⼰专门的⽅法可以实现，⼩程序⾥并没有（当然可能是我学的时间短，还没有发现。。）。
我先把正确的做法放出来，然后再说下错误的是哪部分。⾥边的原理还不清楚，不知道是不是⼀个bug，当然更可能的是我研究不深⼊（笑哭.jpg）。
为了尽可能全⾯清晰地描述，我加了很多标注，并尽量精简了页⾯的元素。
我⽤的⽅法是使⽤wxss⽂件⼿动设置页⾯星星的位置，当然也可以⽤ wx.createSelectorQuery() 这个API动态，更精准地获取信息，不过为了能突出功能的实现（也因为⽐较忙），这个⽅法被略去了，如果有需要，我后期可以添加这部分内容。
wxml⽂件：
<view >
<block for='{{scoreArray}}'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="{{score>index?fullStarUrl:nullStarUrl}}"/>
</view>
</block>
<view class='scoreContent'>{{scoreContent}}</view><!-- 显⽰当前评分 -->
</view>
js⽂件：
Page({
data:{
fullStarUrl:'../../imagesfullStar.png',//满星图⽚卵泡发育不良
nullStarUrl:'../../images/nullStar.png',//空星图⽚
score:0,//评价分数
决心英文
scoreArray:[1,2,3,4,5],//分为1-5个评分层次
scoreText:['1星','2星','3星','4星','5星'],//评分列表
scoreContent:''//⽂字显⽰评分情况
},
changeScore:function(e){
console.log(e)//控制台触摸事件信息
var that =this;
var num =0;//临时数字，动态确定要传⼊的分数
var touchX = e.touches[0].pageX;//获取当前触摸点X坐标
var starMinX =0;//最左边第⼀颗星的X坐标，假设距离页⾯距离为0
var starWidth =30;//星星图标的宽度，假设30(已在wxss⽂件中设置".star")
var starLen =10;//星星之间的距离假设为10(已在wxss⽂件中设置".starLen")
var starMaxX = starWidth *5+ starLen *4;//最右侧星星最右侧的X坐标，需要加上5个星星的宽度和4个星星间距
if(touchX > starMinX && touchX < starMaxX){//点击及触摸的初始位置在星星所在空间之内
/
/使⽤il()⽅法取得当前触摸位置X坐标相对于(星星+星星间距)之⽐的整数，确定当前点击的是第⼏个星星
num = il((touchX - starMinX)/(starWidth + starLen));
if(num != that.data.score){//如果当前得分不等于刚设置的值，才赋值，因为touchmove⽅法刷新率很⾼，这样做可以节省点资源 that.tData({模特人体
score: num,
scoreContent: that.data.scoreText[num -1]
})
}
}el if(touchX < starMinX){//如果点击或触摸位置在第⼀颗星星左边，则恢复默认值，否则第⼀颗星星会⼀直存在
that.tData({
score:0,
scoreContent:''
})
纸盒怎么做
}
},
})
wxss⽂件：
.starLen{
margin-right: 10px;
display: inline-block;
}
.
star{
width:30px;
height:30px;
vertical-align:text-bottom;
display: inline-block;
}突如其来造句
老年健身器材
.scoreContent{
margin-left: 100px;
display: inline-block;
}
效果如下图，⽬前我还不会制作动态图，就先放个不动的，以后有需要就再传个gif：
⾄于之前所说有个问题，是在放图⽚位置使⽤了如下wxml代码：
<view class='starLen'>
厨余垃圾处理方法
<image if='{{score>index}}'class='star'src='../../images/fullStar.png'/>
<image el class='star'src='../../images/nullStar.png'/>
</view>
那个时候没有把图⽚地址放在js⽂件，⽽是直接放在这⾥，后来出问题实在解决不了，就⽤了上⽂的三⽬运算符的⽅法，从js传地址，这样倒是解决了问题，但还不清楚其中原理。。出现的问题是，点
击星星时候，往后滑动是没问题的，在第⼀次按的星星右边可以来回滑动，可是只要滑回左侧，消除⼀颗星后，就会卡住bindtouchmove⽅法，此时怎么滑都没⽤了，只能松开⼿重新点击往后滑。
我也是参考⽹上资源资料学习的，深感有个⼀针见⾎⽅法的重要性，在获取这些资源的同时，我也愿意把⾃⼰的所见所得分享出来，抛砖引⽟，希望能更进⼀步。如果感觉此⽂有⽤，请不吝赐赞~ O(∩_∩)O，⽽且如果发现⽂中内容有所纰漏，也请联系我尽快修改，谢谢⼤家~
对了，⽂中所⽤素材，也是⽹上搜索到的免费资源（如果真侵权了，还请联系我删除），⾃⼰裁了⼀下，如果有练习需要，我也放出来供⼤家使⽤~
上班使我快乐图片
