通俗易懂的五星评价代码——微信小程序如何展示像淘宝天猫那样五星好评？
项目背景
2020年起始，微信官方宣布支持小程序直播。陆续有很多的商家与开发者参与到这场微信生态直播大潮中，作为电商小程序评价内容必不可少的，官方没有提供评价组件只能自己动手丰衣足食。网上看了很多资料写的很复杂，找了些开源，我简化下代码，还上了注释，希望对于新晋开发者有所帮助。
效果图
[图片]
.wxml
[代码]<!-- 评价管理 -->
<view class="star-title">1、品质效果</view>
<view class="star-pos">
<image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}" wx:key="index"
src="{{flag[0]>=item? '/asset/img/icon/star-red.png': '/asset/img/icon/star-empty.png'}}" />
<view style='margin-left: 30rpx;'>{{startext[0]}}</view>
</view>
<view class="star-title">2、服务质量</view>
<view class="star-pos">
<image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}" wx:key="index"
src="{{flag[1]>=item? '/asset/img/icon/star-red.png': '/asset/img/icon/star-empty.png'}}" />
<view style='margin-left: 30rpx;'>{{startext[1]}}</view>
</view>
<view class="star-title">3、综合管理</view>
<view class="star-pos">
<image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}" wx:key="index"
src="{{flag[2]>=item? '/asset/img/icon/star-red.png': '/asset/img/icon/star-empty.png'}}" />
<view style='margin-left: 30rpx;'>{{startext[2]}}</view>
</view>
[代码]
.js
[代码]Page({
/**
* 页面的初始数据
*/
data: {
flag:[0, 0, 0], //每行标记变量 改变显示的五角星
startext: ['', '', ''], //各个下标对应每行显示 5个评价中的一个 非常不满意/不满意
stardata: [1, 2, 3, 4, 5], //每颗星星对应的数值 决定了渲染出几颗五角星
},
// 五星评价事件
changeColor: function (e) {
var index = e.currentTarget.dataset.index; //判断选中了哪个评价 在前端页面写死的索引
var num = e.currentTarget.dataset.no; //前端页面的 item 传来选择了多少个
console.log(num)
var a = 'flag[' + index + ']';
var b = 'startext[' + index + ']';
console.log(a,b)
var that = this;
if(num == 1) {
that.setData({
[a]: 1,
[b]: '非常不满意'
});
} else if (num == 2){
that.setData({
[a]: 2,
[b]: '不满意'
});
} else if (num == 3) {
that.setData({
[a]: 3,
[b]: '一般'
});
} else if (num == 4) {
that.setData({
[a]: 4,
[b]: '满意'
});
} else if (num == 5) {
that.setData({
[a]: 5,
[b]: '非常满意'
});
}
},
})
[代码]
.wxss
[代码]/* 评价 */
.star-pos {
margin: 10rpx;
display: flex;
flex-direction: row;
}
.stars{
width: 40rpx;
height: 40rpx;
margin-left: 30rpx;
}
[代码]
总结
未接触开发这个评价的时候，以为很难很复杂。网上查阅了很多资料，也显示的非常复杂，后来仔细思考清晰了下思路，无非就是图标的变换，数值的改变，以及循环显示五角星，最后整理成上文的代码。
我将陆续发布微信小程序云开发电商系统的文章，欢迎大家关注。也欢迎大家上我开发的“百熟优质果”微信小程序购买我们家的水果哈~
系统使用过程中，有任何需要优化的地方欢迎给我建议~
[图片]
