Rater 星级评分

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2. "w-scrollable-tab-view": "wuss-weapp/w-scrollable-tab-view/index",
  3. }

图片演示

Rater 星级评分 - 图1

代码演示

  1. <view
  2. class=""
  3. style="padding: 10px 0 10px 30px;display: flex; flex: 1;"
  4. hover-class="none"
  5. hover-stop-propagation="false"
  6. >
  7. <w-rater/>
  8. </view>
  9. <w-pane desc="InCell" />
  10. <w-cell-group>
  11. <w-cell label="在Cell中使用">
  12. <w-rater value="1" slot="content" />
  13. </w-cell>
  14. <w-cell label="Max = 4">
  15. <w-rater value="2" max="4" slot="content" />
  16. </w-cell>
  17. <w-cell label="Min = 3">
  18. <w-rater value="3" min="3" slot="content" />
  19. </w-cell>
  20. <w-cell label="禁用">
  21. <w-rater value="4" disabled slot="content" />
  22. </w-cell>
  23. <w-cell label="默认值 5">
  24. <w-rater value="5" slot="content" />
  25. </w-cell>
  26. <w-cell label="iconFont = ♥">
  27. <w-rater
  28. value="3"
  29. icon-font="♥"
  30. font-size="18"
  31. slot="content"
  32. />
  33. </w-cell>
  34. <w-cell label="iconFont = O Count = 6">
  35. <w-rater
  36. value="4"
  37. count="6"
  38. icon-font="O"
  39. font-size="28"
  40. slot="content"
  41. />
  42. </w-cell>
  43. <w-cell label="activeColor = pink">
  44. <w-rater value="4" active-color="pink" slot="content" />
  45. </w-cell>
  46. </w-cell-group>
  1. -
  1. -

API

Attribute 属性

属性说明类型默认值
counticonfont的数量number5
max最大可选值number-
min最小可选值number0
disabled禁用booleanfalse
value当前选中值number0
iconFont自定义字体图标string
activeColor激活的颜色string-
margin每个iconfont之间的外边距number-
fontSizeiconfont大小number-

Event 事件

事件名说明参数
onChange点击时触发的回调e.detail.value

Slot 插槽

名称说明
slot设置为options对应字段containerName的slot名字

Class 自定义类名

类名说明
wuss-class根节点样式类