一、所需代码
(1)html部分
<div class="pres_nav">
<ul>
<li v-for="(item, index) in menuList" :key="item.id" @click="topage()" :style="{ backgroundColor: getBackgroundColor(index, 'li') }">
<div>{{ item.title }}</div>
<div>
<van-icon :name="item.params.icon" :style="{ color: getBackgroundColor(index, 'icon') }" />
</div>
</li>
</ul>
</div>
(2)data中的数据
// 导航li的背景颜色
lisBGCColors: ['#F8F4FD', '#F3FBFB', '#FEF5FA', '#FFF9F2', '#F3F7FF', '#F8F4FD'],
// 图标的颜色
iconsColors: ['#7078F3', '#0AD391', '#FF905B', '#FAAE52', '#4396FF', '#6F77F3']
(3)设置颜色的方法
// 每一个li对应不同的背景颜色
getBackgroundColor(i, type) {
if(type === 'li') {
return this.lisBGCColors[i % this.lisBGCColors.length];
} else if(type === 'icon') {
return this.iconsColors[i % this.iconsColors.length];
}
}
二、效果