小程序星星打分简易版

journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me

星星打分的有各种实现方式,我这边记录当前我做的简易版,欢迎参考使用哦

wxml:

// 循环5个星星,用idx下标来跟当前的score做对比,设置星星高亮,最低一个星

<view class="startArea">
<view>实际情况与案例匹配度</view>
<view class="rate {{score>idx?'redRate':'grayRate'}}" 
        wx:for="{{5}}"  
        bindtap="getTate" 
        wx:for-index="idx" 
        wx:for-item="item"
        data-key="{{idx}}" 
        data-score="{{item +1 }}">  </view>
<textarea value="{{content}}" auto-height placeholder="评价" 	bindinput="bindTextAreaBlur"/>
</view>

js:

data: {
    content:"",
    starts:[1,2,3,4,5],
    score:""
  },
  
  // 设置星星的高亮
  getTate:function(e){
    let that = this
    let key = e.currentTarget.dataset.key
    that.setData({
      score:e.currentTarget.dataset.score
    })
  },
  
  // 评论类容
  bindTextAreaBlur:function(e){
    this.setData({
      content:e.detail.value
    })
  },

wxss:

.startArea {
  height: 394rpx;
  padding: 34rpx 28rpx 34rpx 28rpx;
}

.startArea .rate {
  margin: 22rpx 0 36rpx 0;
}

.startArea .rate{
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block
 
}
.startArea .redRate{
  background-image: url("star-red.png");
}

.startArea .grayRate{
  background-image: url("star-grey.png");
}
.startArea .rate image:last-child{
  margin-right: 0;
}

.startArea textarea {
  background: #F8F8F9;
  min-height: 200rpx;
  border-radius: 12rpx;
  padding: 10rpx;
}