评分 Rate

    支持图片和图标两种资源格式,默认为图标资源

    设置默认选中数

    通过score属性设置默认选中数,支持小数点

    示例代码

    评分 Rate - 图2

    1. <l-rate score="3" />
    2. <l-rate score="3.6" size="56" />
    3. <l-rate score="3.8" size="56" />

    通过 size 属性设置组件元素的大小,传入数值单位为:rpx

    示例代码

    评分 Rate - 图4

    自定义颜色

    示例代码

    1. <l-rate active-color="#FFDD55" inActive-color="#FFF5CE" />

    自定义图标分两种情况:

    1 使用 Lin UI 提供的 icon 组件内的图标;

    2 使用自定义图标库扩展的图标;

    第一种通过 属性匹配对应的icon即可;第二种场景使用步骤如下:

    • 将自定义图标库写入wxss中,通过@font-face定义字体, font-family必须为:iconfont
    • 设置带有content属性 classl-icon-name格式,name值与在rate组件上设置的name属性值保持一致;

    示例代码

    评分 Rate - 图6

    1. <l-rate score="4" name="like" />
    2. <l-rate score="4" name="shouye" active-color="#F4516C"

    自定义图片

    通过active-image设置选中时图片资源;

    通过inActive-image设置选中时图片资源;

    默认图片宽高为80rpx,可通过外部样式类 l-class-image自定义样式。

    设置评分元素个数

    通过 count 属性设置评分组件内元素个数,默认是5个。

    评分 Rate - 图8

    1. <l-rate score="3" count="10" bind:linChange="changeScore" />

    评分属性 (Rate Attributes)

    事件名称说明返回值备注
    bind:linchange单击选中评分时触发当前选择的个数 score-