微信小程序星星评价，滑动星星评价+点击星星评价效果

---

思路：点击星星评价就不用说了，度娘上多得是。我们来说一说滑动评价效果。

1.利用小程序的bindtouchmovechu事件，不知道是啥的，点击这里：https://blog.csdn.net/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.index

if (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

})

}

})

}

})