小程序星级评价

.right{
        width: 73%;
        height: 100%;
        float: left;
        
        .right-left{
          width: 70%;
          height: 98rpx;
          line-height: 98rpx;
          text-align:center;
          float: left;
        }
        .right-right{
          width: 30%;
          height: 98rpx;
          line-height: 98rpx;
          text-align: center;
          font-size: 24rpx;
          font-family:PingFangSC;
          font-weight:400;
          color:#9E9E9E;
          float: left;
        }
      }

<view class="right"> 
         <view class="right-left">
             <text wx:for="{{dataStart}}" wx:item="item" wx:key="{{index}}"  
 class="{{item.show == true?' iconfont my-start-active '+item.icon:'iconfont my-start '+item.icon}}"
 @tap="startClick({{item}},{{index}})"></text>
         </view>
         <view class="right-right">{{startSelect}}</view>
       </view>

let dataStart =[
      {value:1,icon:'icon-pingjia',show:false,name:'非常差'},
      {value:2,icon:'icon-pingjia',show:false,name:'差'},
      {value:3,icon:'icon-pingjia',show:false,name:'一般'},
      {value:4,icon:'icon-pingjia',show:false,name:'好'},
      {value:5,icon:'icon-pingjia',show:false,name:'非常好'}
];
 data = {
      startSelect:'评价',
      dataStart:JSON.parse(JSON.stringify(dataStart)),
      hoseType:'选择',
    }
startClick(_it,index){
        this.master = _it;
        this.startSelect = _it.name;
        this.dataStart.map(it=>it.show=false)
         while(index>=0){
            this.dataStart[index].show = true
            index = index-1;
          }
      },

image.png
image.png

里面图标用了iconfont 这里面我就不写了，自己引用吧，喜欢就留个小星星吧 (^▽)