记录一下工作中遇到的需求 列表循环使用5条数据一种颜色

63 阅读1分钟

image.png 上代码

	<view class="warn_sum">
		<view class="sum_title">
			报警统计
		</view>
		<view class="sum" v-for="(item,index) in warnSumList " :key="index">
			<view class="sum_head">
				<view class="sum_name">
					{{item.equipmentName}}
				</view>
				<view class="sum_factorName">
					({{item.factorName}})
				</view>
			</view>
			<view class="sum_percentage">
				<u-line-progress :percentage="item.value" :showText="false" :activeColor="activeColor(index)">
				</u-line-progress>
				<view class="sum_number">
					{{item.value}}次
				</view>
			</view>
		</view>
	</view>
activeColor(index) {
        if (parseInt(parseInt(index / 5) % 4) === 0) {
                return '#2289ce'
        } else if (parseInt(parseInt(index / 5) % 4) === 1) {
                return '#36B468'
        } else if (parseInt(parseInt(index / 5) % 4) === 2) {
                return '#678FD5'
        } else if (parseInt(parseInt(index / 5) % 4) === 3) {
                return '#3BC3C5'
        }
},