Rate 评分组件 — MXWUI — 风起云涌，雨落无痕 —

用于展示事物评级以及快速打分。

示例图

页面 .json 文件 usingComponents 中引入组件

// json
{
    "usingComponents": {
        "mx-rate": "/components/mxwui/rate/index"
    }
}

页面 .wxml 文件中使用组件

<mx-rate value="{{3}}" bind:rate_change="changeValue" />

属性：value，默认 0，数字。支持整数；开启半星后支持 0.5 步进。

<mx-rate value="{{3}}" />

属性：allowHalf，默认 false，是否允许选择半星。

<mx-rate value="{{3.5}}" allowHalf />

属性：readonly，默认 false，只读时无法交互。

<mx-rate value="{{4}}" readonly />

属性：count，默认 5，展示的星级数量。

<mx-rate value="{{3}}" count="{{10}}" />

属性：allowClear，默认 true。为 true 时再次点击当前星级可清除为 0。

<mx-rate value="{{3}}" allowClear="{{false}}" />

属性：gutter，默认 8，单位 rpx，星星之间的间距。

<mx-rate value="{{3}}" gutter="{{24}}" />

属性：size，默认 48，单位 rpx。

<mx-rate value="{{3}}" size="{{64}}" />

属性：color 为选中色，默认 #FF9F18；voidColor 为未选中色，默认 #EEEEEE。

<mx-rate value="{{3.5}}" allowHalf color="#CA0E2D" voidColor="#E1E5EC" />

属性：character，默认空。传入文本后优先以字符展示评分。

<mx-rate value="{{3}}" character="好" />

<mx-rate value="{{4}}" character="A" />

属性：icon，默认 collect_checked（对应图标类 mx_collect_checked）。未设置 character 时使用该图标。

<mx-rate value="{{3}}" />

<mx-rate value="{{3.5}}" allowHalf icon="love_fill" color="#CA0E2D" />

通过 value 与 bind:rate_change 配合实现受控。

<mx-rate value="{{value}}" bind:rate_change="changeValue" />

Page({
    data: {
        value: 3,
    },
    changeValue(e) {
        this.setData({
            value: e.detail.value,
        });
    },
});

属性：bind:rate_change，打分回调事件。

<mx-rate bind:rate_change="changeValue" />

事件名称	类型	返回值	事件说明
bind:rate_change	Change	`event.detail`	打分回调，返回 `value` 字段