uniapp实现评分效果

最新推荐文章于 2024-09-30 16:59:18 发布

青衫折扇

最新推荐文章于 2024-09-30 16:59:18 发布

阅读量1.1k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_42543264/article/details/130685405

版权

先来看一下效果

调用方法

<template>
	<view class="page-body">
		<view class="span-box">
			<view class="iden"></view>
			基础用法
		</view>
		<uni-score v-model="value"></uni-score>
		<view class="span-box">
			<view class="iden"></view>
			设置尺寸大小
		</view>
		<uni-score :size="15" v-model="value"></uni-score>
		<view class="span-box">
			<view class="iden"></view>
			设置评分数
		</view>
		<uni-score v-model="value" :max="10"></uni-score>
		<view class="span-box">
			<view class="iden"></view>
			设置星星间隔
		</view>
		<uni-score v-model="value" :margin="20"></uni-score>
		<view class="span-box">
			<view class="iden"></view>
			设置颜色（如果isImg为true则无效）
		</view>
		<uni-score v-model="value" activeColor="red" color="#999999"></uni-score>
		<view class="span-box">
			<view class="iden"></view>
			星星镂空状态
		</view>
		<uni-score v-model="value" :isFill="true"></uni-score>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 3
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-body {
		margin: 0 20px;
	}
	
	.span-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 20px;
	}
	
	.iden {
		width: 2px;
		height: 15px;
		background: #FA7819;
		margin-right: 10px;
	}
</style>

如有疑问可加入群聊 712627377 或扫码关注小程序查看更多