思路：点击星星评价就不用说了，度娘上多得是。我们来说一说滑动评价效果。
1.利用小程序的bindtouchmovechu事件，不知道是啥的，点击这里：/crazytea/article/details/53228755，通过这个可以得到滑动坐标信息。
2.通过wx.createSelectorQuery()可以取到显示在手机屏幕上元素的宽高信息。这里需要星星盒子的宽、当个星星的宽及星星之间的间距。
3.用滑动的x轴坐标减去外边距（如果有的话）就是滑动的距离，我这里是把星星和星星之间的间距对半处理了，算出在滑动的距离范围内应展示的星星。
下面代码复制进去即可看见效果。
wxml:
<view wx:for="{{titlelist}}" wx:key="titlekey" wx:for-item="titleitem" wx:for-index="titleIndex" class='pj_view'><view class='bigtitle'>{{titleitem}}</view><view class='start_view'><view class='starttouch' bindtouchmove='startscroll' data-index='{{titleIndex}}'><block wx:for="{{stars}}" wx:key="starkey" wx:for-item="staritem" wx:for-index="starIndex"><image class="star-image" style="left: {{staritem*150}}rpx" src="{{keylist[titleIndex] > staritem ?(keylist[titleIndex]-staritem == 0.5?halfSrc:selectedSrc) : normalSrc}}" data-key="{{staritem+1}}" data-index='{{titleIndex}}' bindtap="startClick" style='{{starIndex == stars.length-1 ? "margin-right:0;":""}}'></image></block></view><block wx:if='{{keylist[titleIndex] == 0}}'><view class='smalltitle' style='font-size: 20rpx;'>请滑动星星评价</view></block><block wx:else><view class='smalltitle'><block wx:if='{{keylist[titleIndex]*2 > 0 && keylist[titleIndex]*2 < 3}}'>{{keylist[titleIndex]*2}}分 不满意</block><block wx:elif='{{keylist[titleIndex]*2 >= 3 && keylist[titleIndex]*2 < 6}}'>{{keylist[titleIndex]*2}}分 一般</block><block wx:elif='{{keylist[titleIndex]*2 >= 6 && keylist[titleIndex]*2 < 9}}'>{{keylist[titleIndex]*2}}分 不错</block><block wx:else>{{keylist[titleIndex]*2}}分 超赞</block></view></block></view></view><view class='proposal'><text class='bigtitle'>5.其他建议</text><textarea class='content' maxlength='-1' bindinput='proposal' value='{{textareaStr}}'></textarea></view><view class='button' bindtap='proposalClick'>提交评价</view>
wxss:
page{background: #fff;}.pj_view{margin: 40rpx 30rpx;}.bigtitle{font-size: 30rpx;color: #333;}.start_view{margin: 30rpx 0 40rpx 20rpx;height: 56rpx;line-height: 56rpx;}.starttouch{display: inline-block;width:462rpx;height: 56rpx;}.star-image {width: 56rpx;height: 56rpx;margin-right: 45rpx;}.smalltitle{display: inline-block;position: relative;top: -20rpx;font-size: 30rpx;color: #ffaf02;margin-left: 39rpx;}.proposal{margin:0 30rpx 40rpx 30rpx;}.content{width: 100%;height: 237rpx;background: #f5f5f5;margin-top: 30rpx;}textarea{color: #333;font-size: 30rpx;}.button{margin: 0 30rpx 30rpx 30rpx;background: #388ef2;font-size: 30rpx;color: #fff;text-align: center;height: 90rpx;line-height: 90rpx;border-radius: 10rpx;}
js:
//获取应用实例var app = getApp()Page({data: {stars: [0, 1, 2, 3, 4],normalSrc: '../images/normal.png',selectedSrc: '../images/selected.png',halfSrc: '../images/half.png',textareaStr: '',keylist:[0,0,0,0],titlelist:['1.讲师仪表仪态得体。','2.讲课声音清晰，语速适中，有良好的表达能力。','3.讲师专业基础知识扎实，对教材变动了解清晰，讲课清晰易懂。','4.您对本次课程的综合评分是？',// '5.其他建议'],scrollTop: 0},onLoad: function () {},startClick: function (e) {var key = e.currentTarget.dataset.key;var index = e.currentTarget.dataset.indexif (this.data.keylist[index] >= key) {key -= 0.5;}this.data.keylist[index] = key;this.setData({keylist: this.data.keylist})},proposal: function (e){this.setData({textareaStr: e.detail.value})},proposalClick: function () {console.log(this.data.keylist)console.log(this.data.textareaStr)},startscroll: function (e){var index = e.currentTarget.dataset.index;var endX = e.changedTouches[0].clientX;var endY = e.changedTouches[0].clientY;let query = wx.createSelectorQuery().in(this);query.select('.starttouch').boundingClientRect();query.select('.star-image').boundingClientRect();query.exec(res => {var starthzW = res[0].width;//盒子宽var starthzLeft = res[0].left;var startWidth = res[1].width;//每颗星星宽var jianju = (starthzW - startWidth * 5) / 4;//星星之间的间距// console.log(starthzW, starthzLeft, startWidth, jianju)if (endX >= starthzLeft && (endX - starthzLeft) <= starthzW){// console.log(endX)var sum = 0.5;if (endX - starthzLeft <= startWidth / 2){return;}else {if (endX - starthzLeft > starthzW - startWidth / 2){sum += (endX - starthzLeft - startWidth) / (startWidth / 2 + jianju / 2) / 2 + 0.5;}else{sum += (endX - starthzLeft - startWidth) / (startWidth / 2 + jianju / 2) / 2}}if (parseFloat(sum).toFixed(1) - parseInt(sum) > 0.5){sum = parseInt(sum) + 1;} else if (parseFloat(sum).toFixed(1) - parseInt(sum) == 0){return;}else{sum = parseInt(sum) + 0.5;}// console.log(sum)this.data.keylist[index] = sum;this.setData({keylist: this.data.keylist})}})}})
如果觉得《微信小程序星星评价 滑动星星评价+点击星星评价效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
