uni-app+iconfont 实现星级评分(vue)

如果需求主要应用于手机浏览器,手机浏览器的标题栏和uni-app的标题栏重复,可将uni-app默认的浏览器隐藏

   //pages.json
    "style" : {  
        "navigationStyle":"custom"     //单个取消导航栏
    }, 
    "globalStyle" : {
        "navigationStyle": "custom"        //全局取消导航栏
    }
<template>
	<view class="uni-padding-wrap uni-common-mt star">
		<view style="display: flex;" class="uni-flex uni-row">
			<view :class="{starActive:item}" @click="choise(index)" class="flex-item iconfont" v-for="(item,index) in clicked_list">
				<view v-if="item" class="starIcon">
					&#xe601;
				</view>
				<view v-else class="starIcon">
					&#xe602;
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

uni-app的iconfont引入,目前只能成功引入Unicode格式,也就导致之后的开发不能通过动态绑定class实现。
iconfont Unicode引入方法 

<script>
	export default {
		// props:{

		// },
		data() {
			return {
				//对应星星个数
				clicked_list: [false, false, false, false, false]
			}
		},
		methods: {
			//starIcon
			starIcon(item) {
				if (item) {
					return '&#xe601;'
				} else {
					return '&#xe602;'
				}
			},
			//点击选择
			choise(num) {
				// num 为点击的星星在数组中的下标
				this.clicked_list = [false, false, false, false, false];
				num = num + 1;
				for (let i = 0; i < num; i++) {
					this.clicked_list[i] = true;
				}
				//将分数传给父组件
				this.$emit('getScore', num)
			}
		},

	}
</script>
<style lang="scss">
	.star {
		.uni-common-mt {
			box-sizing: border-box;
			width: 100%;
			overflow: hidden;
			padding: 0 85upx;
			margin-top: 20upx;

			.flex-item {
				display: inline-block;
				width: 20%;
				color: #999;

				.starIcon {
					font-size: 52upx;
				}
			}
		}

		.starActive {
			color: #ff8000;
		}
	}

	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot');
		src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff') format('woff'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.svg#font_family') format('svg');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 12px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		margin-left: 30upx;
	}
</style>

猜你喜欢

转载自blog.csdn.net/YiMiMMMi/article/details/106802016