小程序五星好评

首先您需要两张小星星的图片

.wxml文件

<view class="star">
  <view class="star_center">
    <view class="star_box">
      <view class="right">
        <view bindtap="starTap" data-index="{{index}}" class="star" wx:for="{{userStars}}" wx:key="index">
          <image src="{{item}}"></image>
        </view>
      </view>
    </view>
    <view class="star_font">您觉得课程不错的话请打五星哦~</view>
  </view>
</view>

//可以在框里面写字的那种
<view class="evaluate">
  <view class="evaluate_center">
    <textarea placeholder="期待您的评价，会对其他家长帮助很大哦，(至少要写八个字哦~)" name="bindTextAreaBlur" bindblur="getText" bindinput="getValueLength" show-confirm-bar='true' value="{{editText}}" bindconfirm="getText" maxlength="{{max}}" minlength="{{min}}" auto-focus>
      <text class="minWord">{{minWord}}</text>
    </textarea>
    <view class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</view>
  </view>
</view>

.wxss文件

.star_center {
  width: 687rpx;
  height: 350rpx;
  margin: auto;
}

.star_box {
  width: 500rpx;
  height: 100rpx;
  margin: auto;
  margin-top: 30rpx;
}

.star_font {
  width: 500rpx;
  height: 50rpx;
  margin: auto;
  font-size: 24rpx;
  line-height: 50rpx;
  color: #727272;
  text-align: center;
}

.right .star {
  float: left;
  width: 95rpx;
  height: 60rpx;
  text-align: center;
  line-height: drpx;
  padding: 20rpx 2rpx;
}

.star image {
  width: 55rpx;
  height: 55rpx;
}




//可以在框里面写字的那种
.evaluate {
  width: 100%;
  height: 450rpx;
}

.evaluate_center {
  width: 96%;
  height: 450rpx;
  margin: auto;
  padding: 30rpx;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
}
 
.evaluate_center textarea {
  min-height: 400rpx;
  max-height: 400rpx;
  line-height: 35px;
  font-size: 26rpx;
  width: 100%;
  height: 100%;

  
}
 
.minWord {
  color: red;
   font-size: 26rpx;
  position: absolute;
  top: 30px;
}
 
.currentWordNumber {
  height: 35px;
  line-height: 35px;
  font-size: 26rpx;
  float: right;
  margin-right: 15px;
  color: rgba(136, 136, 136, 1);
  margin-bottom: 10px;
}

.wxml文件

data: {

    userStars: [
      '../../../image/xingxing_s.png',
      '../../../image/xingxing_k.png',
      '../../../image/xingxing_k.png',
      '../../../image/xingxing_k.png',
      '../../../image/xingxing_k.png'
    ],
    max: 300, //2限制最大输入字符数
    min: 8,  //2限制最小输入字符数
    minWord: ''//2提示语句
  },
  //1 星星点击事件
starTap: function(e){
  var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
  var tempUserStars = this.data.userStars; // 暂存星星数组
  var len = tempUserStars.length; // 获取星星数组的长度
  for(var i = 0; i < len; i ++){
    if(i <= index){ // 小于等于index的是满心
      tempUserStars[i] = '../../../image/xingxing_s.png'
    }else{ // 其他是空心
      tempUserStars[i] = '../../../image/xingxing_k.png'
    }
  }
  // 重新赋值就可以显示了
  this.setData({
      userStars: tempUserStars
  })
},

/****2限制字数与计算 */
  getValueLength: function (e) {
    let value = e.detail.value
    let len = parseInt(value.length)
    //最少字数限制
    if (len <= this.data.min)
      this.setData({
        minWord: "至少填写8个字哦～"
      })
    else if (len > this.data.min)
      this.setData({
        minWord: " "
      })
    //最多字数限制
    if (len > 300) return;
    this.setData({
      currentWordNumber: len //当前字数 
    })
  },

成果展示