本文实例讲述了微信小程序实现的五星评价功能。分享给大家供大家参考,具体如下:
实现五星评价功能,效果图如下:

.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}}"
-         src="{{flag[0]>=item? '../../images/icon/star1.png': '../../images/icon/star0.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}}"
-           src="{{flag[1]>=item? '../../images/icon/star1.png': '../../images/icon/star0.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}}"
-         src="{{flag[2]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
-   <view style='margin-left: 30rpx;'>{{startext[2]}}</view>
- </view>
-  
 
.js 文件:
- page: ({
-   data: {
-       flag:[0, 0, 0],
-       startext: ['', '', ''],
-       stardata: [1, 2, 3, 4, 5],
-     },
-     // 五星评价事件
-     changeColor: function (e) {
-       var index = e.currentTarget.dataset.index;
-       var num = e.currentTarget.dataset.no;
-       var a = 'flag[' + index + ']';
-       var b = 'startext[' + index + ']';
-       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;
- }
-  
 
希望本文所述对大家微信小程序开发有所帮助。