uniapp组件-uni-rate评分

Bertha 。 2021-07-25 11:18 1458阅读 1赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=33][https_ext.dcloud.net.cn_plugin_id_33]

评分组件多用于商品评价打分、服务态度评价、用户满意度等场景

## 效果图： ##

![20210301222838446.gif][]

## 代码实现： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<template>
    	<view>
    		基本用法(支持滑动手势选择评分):<uni-rate v-model="rateValue" @change="onChange" />
    	    不支持滑动手势选择评分:<uni-rate :touchable="false" :value="5" @change="onChange" />
    
    		设置尺寸大小:<uni-rate size="18" :value="4" />
    		设置评分数:<uni-rate :max="10" :value="5" />
    		设置星星间隔:<uni-rate :value="4" :margin="20" />
    		设置颜色:<uni-rate :value="3" color="#bbb" active-color="red" />
    		半星:<uni-rate allow-half :value="3.5" />
    
    		只读状态:<uni-rate :readonly="true" :value="2" />
    		禁用状态:<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
    		未选中的星星为镂空状态:<uni-rate :value="3" :is-fill="false" />
    	</view>
    </template>
    
    <script>
    	export default {
    		components: {},
    		data() {
    			return {
    				rateValue: 3
    			}
    		},
    		methods: {
    			onChange(e) {
    				uni.showToast({
    					title:'rate发生改变:' + JSON.stringify(e)
    				})
    			}
    		}
    	}
    </script>

[https_ext.dcloud.net.cn_plugin_id_33]: https://ext.dcloud.net.cn/plugin?id=33
[20210301222838446.gif]: https://img-blog.csdnimg.cn/20210301222838446.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210301222917659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70