jeecg uniapp小程序页面实现星级评价

xiaoxiaoman2010

已于 2023-04-13 10:24:32 修改

阅读量748

点赞数

文章标签： uni-app 小程序 javascript

于 2023-04-13 10:06:17 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoman2010/article/details/130123235

版权

html，使用iconfont

		<view :class="{starActive:item}" @click="choise(index)" 
          class="flex-item iconfont" v-for="(item,index) in clickedList">

				<view v-if="item" class="starIcon" style="color: #ff8000">
					&#xe685;
				</view>
				<view v-else class="starIcon">
					&#xe8c3;
				</view>
			</view>

css

	.starActive {
		color: #ff8000;
	}

clickedList: [false, false, false, false, false], //对应星星个数
//点击选择
choise(num) {
		let that = this
		// num 为点击的星星在数组中的下标
		this.clickedList = [false, false, false, false, false];
		num = num + 1;
		for (let i = 0; i < num; i++) {
			this.clickedList[i] = true;
		}


}
starIcon(item) {
	if (item) {
		return '&#xe685;'
	} else {
		return '&#xe8c3;'
	}
},

效果