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

API

Attribute 属性

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

Event 事件

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

Slot 插槽

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

Class 自定义类名

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