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 属性

属性说明类型默认值
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根节点样式类