vantWeapp实现星星评分

1.效果图

2.实现原理

https://vant-contrib.gitee.io/vant-weapp/#/rate

3.完整代码

https://gitee.com/susuhhhhhh/picker

4.实现步骤

克隆代码之后，在components的文件夹下的vant文件夹，为实现星星评分的组件。
部分代码

<!--pages/star/index.wxml-->
<view class="star">
  <van-rate value="{{ star }}" bind:change="onChange" />
  <view class="text">{{status}}</view>
</view>


<view class="star">
  <van-rate
    value="{{ star }}"
    icon="like"
    color="red"
    void-icon="like-o"
    void-color="#eee"
    bind:change="onChange"
  />
  <view class="text">{{status}}</view>
</view>

<view class="star">
  <van-rate
    value="{{ star }}"
    allow-half
    void-icon="star"
    void-color="#eee"
    bind:change="onChange"
  />
  <view class="text">{{status}}</view>
</view>


<view class="star">
  <van-rate value="{{ star }}" count="{{ 6 }}" bind:change="onChange" />
  <view class="text">{{status}}</view>
</view>


<view class="star">
  <van-rate disabled value="{{ star }}" bind:change="onChange" />
  <view class="text">{{status}}</view>
</view>


<view class="star">
  <van-rate readonly  value="{{ star }}" bind:change="onChange" />
  <view class="text">{{status}}</view>
</view>

// pages/star/index.js
Page({

  data: {
    star:0,//几颗星
    status:'请评价'
  },

  
  onLoad: function (options) {

  },

  onShow: function () {

  },

  onChange(event) {
    this.setData({
      star: event.detail,
    });
    let status='';
    switch(this.data.star){
      case 1:
        status='很差';
        break;
      case 2:
        status='比较差';
        break;
      case 3:
        status='一般';
        break;
      case 4:
        status='比较满意';
        break;
      case 5:
        status='很满意';
        break;
      case 0.5:
        status='很差啊啊啊';
        break;
      case 1.5:
        status='比较差啊啊啊';
        break;
      case 2.5:
        status='一般啊啊啊';
        break;
      case 3.5:
        status='比较满意啊啊啊';
        break;
      case 4.5:
        status='很满意啊啊啊';
        break;
      case 6:
        status='超级满意';
        break;
    }
    this.setData({
      status:status
    })
  },
})