微信小程序开发-五星评价

本文主要是介绍微信小程序开发-五星评价，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天在做自己的小程序的时候做到一个对店铺的评价，文字什么的都很easy，遇到一个有趣的五星评价。先想到一个直接选择12345星的五星评价，以后有3星半的评价的效果再继续补充。

开始撸代码。。。。。

首先上个wxml代码：

<view class="comment1-description" style="display:flex;flex-direction:row;"><view class="comment1-description1">描述相符</view><view  class="star-pos" style="display:flex;flex-direction:row;"><image class='stars' src='{{flag >= 1 ? img.selected:img.normal}}' bindtap="changeColor1"></image><image class='stars' src='{{flag >= 2 ? img.selected:img.normal}}' bindtap="changeColor2"></image><image class='stars' src='{{flag >= 3 ? img.selected:img.normal}}' bindtap="changeColor3"></image><image class='stars' src='{{flag >= 4 ? img.selected:img.normal}}' bindtap="changeColor4"></image><image class='stars' src='{{flag >= 5 ? img.selected:img.normal}}' bindtap="changeColor5"></image></view></view>

一看就很明显的知道用了三元选择和绑定事件。

wxss：

/*星星的样式*/
.comment1-description{margin-top: 50px;
}
.stars{width: 43rpx;height: 43rpx;margin-left: 40rpx;
}

js：

Page({data: {flag: 0,img:{"normal":"/images/icons/star.png","half": "/images/icons/star1.png","selected": "/images/icons/star2.png"}},changeColor1: function () {var that = this;that.setData({flag: 1});console.log("选择 "+that.data.flag +" 星");},changeColor2: function () {var that = this;that.setData({flag:2});console.log("选择 " + that.data.flag + " 星");},changeColor3: function () {var that = this;that.setData({flag: 3});console.log("选择 " + that.data.flag + " 星");},changeColor4: function () {var that = this;that.setData({flag: 4});console.log("选择 " + that.data.flag + " 星");},changeColor5: function () {var that = this;that.setData({flag: 5});console.log("选择 " + that.data.flag + " 星");}
})

基本原理就是用了三元选择判断。

后来想了想，这样写的话会在其他评价比如有好几个五星评价的话很麻烦，后期优化ing

附上用的png图：