评分 Rate

基本用法

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

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

示例代码

<l-rate/>

设置默认选中数

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

示例代码

    <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

示例代码

    <l-rate size="56" />

自定义颜色

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

示例代码

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

自定义图标

自定义图标分两种情况：

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

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

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

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

示例代码

@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-class-image自定义样式。

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

设置评分元素个数

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

示例代码

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

禁用

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

评分属性 （Rate Attributes）

评分事件 (Rate Events）