Introduction

The Rate Score rating component provides two rating modes — number and star — and can be used in scenarios such as product reviews and satisfaction surveys. The component supports a customizable maximum rating value and provides real-time feedback when the user taps.

Usage

When importing locally, configure it in the index.json of the page or component that needs it.

"usingComponents": {
  "fs-score": "/avaui-sub/score/index"
}

PWC (custom component/plugin) usage: only the usingComponents registration follows the format below (the avaComponent:// protocol); other usage is identical to local registration.

"usingComponents": {
  "fs-score": "avaComponent://avaui-sub/score/index"
}

Code Demos

Basic Usage

API

Parameters

Parameter	Description	Type	Optional Values	Default
type	Rating type	String	number/star	number
max	Maximum rating value	Number	-	10
value	Current rating value	Number	-	0
readOnly	Whether read-only; in read-only state it does not respond to click events	Boolean	true/false	false

Events

Name	Parameters	Description
change		Triggered when the rating changes, returns the current rating value

Example Code

Number Rating

<score type="number" max="10" value="5" bind:change="onScoreChange"></score>

Star Rating

<score type="star" max="5" value="3" bind:change="onScoreChange"></score>

Read-only Rating

<score type="star" max="5" value="4" readOnly="{{true}}"></score>

Page({
  onScoreChange(e) {
    const { value } = e.detail;
    console.log('Current rating:', value);
  }
})

打开预览