思路:点击星星评价就不用说了,度娘上多得是。我们来说一说滑动评价效果。
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
})
}
})
}
})