评分 Rate

基本用法

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

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

示例代码

评分 Rate - 图1

  1. <l-rate/>

设置默认选中数

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

示例代码

评分 Rate - 图2 评分 Rate - 图3

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

自定义组件样式

自定义大小

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

示例代码

评分 Rate - 图4

  1. <l-rate size="56" />

自定义颜色

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

示例代码

评分 Rate - 图5

  1. <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属性值保持一致;

示例代码

评分 Rate - 图6

  1. @font-face {font-family: "iconfont";
  2. 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'),
  3. url('iconfont.woff?t=1551939237196') format('woff'),
  4. url('iconfont.ttf?t=1551939237196') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  5. url('iconfont.svg?t=1551939237196#iconfont') format('svg'); /* iOS 4.1- */
  6. }
  7. .l-icon-shouye:before {
  8. content: "\e73d";
  9. }
  1. <l-rate score="4" name="like" />
  2. <l-rate score="4" name="shouye" active-color="#F4516C"
  3. inActive-color="rgba(244,81,108,0.1)" />

自定义图片

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

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

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

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

评分 Rate - 图7

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

设置评分元素个数

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

示例代码

评分 Rate - 图8

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

禁用

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

评分组件属性 (Rate Attributes)

参数说明类型可选值默认值
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禁用评分组件Booleantruefalsefalse

评分外部样式类(Rate ExternalClasses)

外部样式类名说明备注
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替代

评分组件事件 (Rate Events)

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