#
评分 Rate

# 基本用法

评分组件默认元素个数为5个,元素大小为:36rpx;

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

# 示例代码

height=50

<l-rate/>

# 设置默认选中数

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

# 示例代码

height=50 height=50

    <l-rate score="3" />
    <l-rate score="3.6" size="56" />
    <l-rate score="3.3" size="56" />
    <l-rate score="3.8" size="56" />

# 自定义组件样式

# 自定义大小

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

# 示例代码

height=50

    <l-rate size="56" />

# 自定义颜色

通过 active-color 属性设置选中时元素颜色; 通过 inActive-color 属性设置未选中时元素颜色;

# 示例代码

height=50

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

# 自定义图标

自定义图标分两种情况:

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

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

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

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

# 示例代码

height=50

@font-face {font-family: "iconfont";
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATAAAsAAAAACSAAAARyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqFRIRVATYCJAMUCwwABCAFhG0HTBvdB1GULk6Y7OMwbvhKKLGYXKG1QTHZ/P9E8Px+3+ZceSuuUZt43LRpowONRIgkiAlKstDEQ/vD/7Z8yCXWZXAZsTWDB8cV9qJ0a71Fhbj4iyxdRfz92KzodRpRH97oxT7m2iBxhEjSkAhJZeLNQmFteSs9boGdQx1M0OMEOs2KhpyVVjcDO4W0KRCvWIYAdj6zkkIK7bom5mQR70HVnt4KzgHemX8fvySGHUnNpJ3XDyUUyP+W87wQ1f7XutUxANXnxO0cGduAQryIdd9B7fQ2VOen2MoBoF12JurK5j0v/N9iXIF0LOp2/odHSLJCNCR1NxGPVGXOkMon+JbHJ/GtgE/mW6F0p6grre9EP+ATADELxGV1ne0rKIM2SOocdsSw7nEvDw+B7RvJxgNe6AJdFGMyREAjECzeN4oSSFEaiUQGYYjOJOwyGAGhN+eadW3MQYvhuvRTtdeyqX3XWi8bmhiTRWe+YtZfC6cuacns+Xq31oU69zwSQ4WGJa5g/uIBIj2vM7mLFxi1mwdJdlzxQ5dFtSHrLGXC49cDQIvRU7D8kkaHJK1R2GcwIbl1IRJLD4Ri6/d5AK0LoY+kD5gtlirL9RZXdzPYcvr69XYDmwfrr5HzegT8F5vNmWeu1Ye3ehWRvBkiQ+tbeV2Ue/LQvL5LraKL/lRpUEJSQkkQ5X9R1OqWlF4afLHvYnEwYMHRrdaP0kSJkyRRCprTU6iwqfXNdxW2lmaGDJdRamojSNksuqVlKhl2Uvtm4x87cM6vshnJfKVf87e709xyccO/jUVLfJYYjUu9lyaBdi4zJVP0SPJR7JDH/18OS4N8Ax+4PAj0DVq+2Go1jx3AnLvksVhN9ZyDa6qrvWK7ZUHCAxhfHwTAB0mSxEp9rwOaUUsk2SL60MFDtChbPB20MN+kwlI+WC4dWUAOro7kPQvyHR1BaArdxOACUjoy9hZ8YWnS3ctx9bHxFcJ+3k3vC0tkxXsWstBfpBk3xtlhSd/etuRtud+XQWAGtpc3JqclnwUjALQO5z40j9Mn8kG0hPBs9ks+nt2umlXuFn79GyLN/mon3GMDXzdaNnCodbiAcujQo9zoGkE5u8pXJllqeberkre3utrCGxI6deLayDPoXj3akdxJQrsP3SBpMwNZu2VsIW5D1WUHGu0OodOWsvNdhiigonRg02SA0G87JL0+QtbvPLYQ70I16i00+gOFTjfhfMsuq8FiRQpIqCCFDxuJsyTXSys2FWbVNkJG3U0ovDKT0goVSjaGJ8TGB3NlsBcq6tij1DCJKhWN0wquBy+Fp8Hubg6XKbhOSKpiO1QqWWZcHB33RbEk1wMwpxQgggpEwQ0zEo5F4vSi9f4qWOj3G0EMtW4ERUrHj2ArSEGJnR6XIFZ8DmyZujdXx77MV9JgJFJRoXkdTYHTA1eKTqhbTnNwsvhlnSCSSqyOEkmZTHHUi86rjm1f27ONJ6CT9NYaKXKUqNFoXndw6pHQZiTBydhe25FcL+O02oxgO9RELwAAAA==') format('woff2'),
  url('iconfont.woff?t=1551939237196') format('woff'),
  url('iconfont.ttf?t=1551939237196') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1551939237196#iconfont') format('svg'); /* iOS 4.1- */
}

.l-icon-shouye:before {
  content: "\e73d";
}

    <l-rate score="4" name="like" />
    <l-rate score="4" name="shouye" active-color="#F4516C"  
            inActive-color="rgba(244,81,108,0.1)" />
    

# 自定义图片

使用自定义图片必须同时设置选中时图片资源未选中是的图片资源,图片资源必须是绝对路径。

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

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

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

height=50

    <l-rate score="4" 
        active-image="/pages/components/form/images/smile-active.png"
        inActive-image="/pages/components/form/images/smile-inactive.png" />
   

# 设置评分元素个数

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

# 示例代码

height=50

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

# 禁用

通过 disabled属性值为true禁用评分组件,此时点击事件没有任何反应。

# 评分组件属性

参数 说明 类型 可选值 默认值
count 评分组件元素个数 Number - 5
score 默认选中元素个数 Number - 0
size 图标元素大小 String - 36
active-color 图标元素选中时颜色 String - #FF5252
inActive-color 图标元素未选中时颜色 String - #FFE5E5
name 图标元素类型 String - -
active-image 未选中状态下的图片资源 String 图片路径为绝对路径 -
inActive-image 未选中状态下的图片资源 String 图片路径为绝对路径 -
disabled 禁用评分组件 Boolean truefalse false
item-gap 星星(元素)间距,单位 rpx Number - 10

# 评分外部样式类

外部样式类名 说明 备注
l-class 覆盖评分组件的外部样式类
l-image-class 自定义图片样式 取代l-class-image
l-icon-class 自定义图标样式 取代l-class-icon

# 已经弃用的外部样式类

以下这些外部样式类已经停止支持,将在未来的某个版本中去除,请使用上方的外部样式类替代。

外部样式类名 说明 备注
l-class-image 自定义图片样式 请使用l-image-class替代
l-class-icon 自定义图标样式 请使用l-icon-class替代

# 评分组件事件

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