uni-app

component name: uni-rate

Code block: uRate Associated components: uni-icons

The scoring component is mostly used for scenarios such as evaluating the product after purchasing the product

# introduce

Notes

In order to avoid wrong use and bring you a bad development experience, please read the following instructions carefully before using the component, which can help you avoid some mistakes.

Sporadic selection is temporarily not supported

The current version does not support modifying the icon, and subsequent versions will continue to optimize

the recommended way to bind values using v-model

If you need to set a star to indicate multiple points, for example: display 5 stars, the highest score is 10 points. In this case, please handle it yourself in the change event listener. You can multiply the obtained value by your cardinality. The default component is one star and one point.

# Basic usage

<!-- Basic usage -->
<!-- You need to bind the value variable in the script -->
<uni-rate v-model="value" @change="onChange"/>

<!-- Swipe gestures are not supported to select ratings -->
<uni-rate :touchable="false" :value="5"/>
<!-- set size -->
<uni-rate :size="18" :value="5"/>

<!-- Set the number of ratings -->
<uni-rate :max="10" :value="5" />
	
<!-- set star interval -->
<uni-rate :value="4" :margin="20" />	

<!-- set color -->
<uni-rate :value="3" color="#bbb" active-color="red" />

<!-- select half star -->
<uni-rate allow-half :value="3.5" />

<!-- read-only status -->
<uni-rate :readonly="true" :value="2" />

<!-- Disabled state -->
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />

<!-- Unselected stars are hollowed out -->
<uni-rate :value="3" :is-fill="false" />


export default {
	components: {},
	data() {
		return {
			value: 2
		}
	},
	methods: {
		onChange(e) {
		}
	}
}

# API

# Rate Props

property name	type	default value	description
value/v-model	Number	0	Current Rating
color	String	#ececec	Unchecked star color
activeColor	String	#ffca3e	Selected star color
disabledColor	String	#c0c0c0	Disabled star color
size	Number	24	The size of the star
max	Number	5	The maximum number of ratings, currently one point and one star
margin	Number	0	The spacing of the stars, in px
isFill	Boolean	true	The type of the star, whether it is a solid type
disabled	Boolean	false	Is it disabled (previously read, now corrected to disabled)
readonly	Boolean	false	Is it read-only
allowHalf	Boolean	false	Whether to show half stars
touchable	Boolean	true	Whether swipe gestures are supported

# Rate Events

Event name	Description	Return parameter
@change	Change the value of value and return	e = { value:number }

# example

attention

The example relies on multiple components such as uni-card uni-section uni-scss, copying the example code directly will not work properly.

Please go to the Component download page , select Import sample project using HBuilderX on the right side of the page to experience the complete component example.

Template

Script

<template>
	<view class="container">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">评分组件多用于商品评价打分、服务态度评价、用户满意度等场景。</text>
		</uni-card>
			<uni-rate v-model="rateValue" @change="onChange" />
		</uni-section>
			<uni-rate :touchable="false" :value="5" @change="onChange" />
		</uni-section>
			<uni-rate size="18" :value="5" />
		</uni-section>
			<uni-rate :max="10" :value="5" />
		</uni-section>
			<uni-rate :value="4" margin="20" />
		</uni-section>
			<uni-rate :value="3" color="#bbb" active-color="red" />
		</uni-section>
			<uni-rate allow-half :value="3.5" />
		</uni-section>
			<uni-rate :readonly="true" :value="2" />
		</uni-section>
			<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
		</uni-section>
			<uni-rate :value="3" :is-fill="false" />
		</uni-section>
	</view>
</template>