移动端实现彩色导航

news/2024/7/10 2:51:25 标签: 前端, javascript, 彩色导航, vue, vue.js

一、所需代码

(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中的数据

javascript">// 导航li的背景颜色
lisBGCColors: ['#F8F4FD', '#F3FBFB', '#FEF5FA', '#FFF9F2', '#F3F7FF', '#F8F4FD'],
// 图标的颜色
iconsColors: ['#7078F3', '#0AD391', '#FF905B', '#FAAE52', '#4396FF', '#6F77F3']

 (3)设置颜色的方法

javascript">// 每一个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];
  }
}

二、效果


http://www.niftyadmin.cn/n/5182453.html

相关文章

java 多线程 Thread 互斥锁

package com.data.entity;import java.util.ArrayList; import java.util.List;public class MyList {public List<Integer> listnew ArrayList<>();//同步方法 线程锁//public synchronized void insert(int i){public void insert(int i){list.add(i);}public …

用PHP使用API接口获取虾皮商品详情

作为一名程序员&#xff0c;我们常常需要与各种API接口打交道&#xff0c;以获取我们需要的数据。本文将向您展示如何使用PHP编程语言与虾皮的API接口进行交互&#xff0c;以获取虾皮商品详情。 一、准备工作 在开始编写代码之前&#xff0c;确保您已经完成了以下准备工作&am…

企业传统纸质设备维修方式的痛点以及解决方案

传统的纸质设备维修方式有很多痛点&#xff1a; 数据更新和访问的低效率&#xff1a;传统的纸质记录方法在更新和检索数据时效率极低。这种方式无法实时更新设备的维修状态&#xff0c;导致管理层和维修人员无法及时获取最新信息&#xff0c;影响决策的速度和质量。 记录的易…

源码编译后kamcmd命令不能自动补全

apt install -y libreadline-dev 重新编译kamcmd即可 参考 源码目录\pkg\kamailio\deb\bullseye\control 英文应该怎样描述&#xff1a; kamcmd autocompletion not working

软考高级职称哪个好考?明确给你答案

软考考试分为初、中、高三级&#xff0c;其中高级5个方向分别为系统分析师、信息系统项目管理师、网络规划设计师、系统架构设计师、系统规划与管理师。软考高级职称考什么好&#xff1f;有很多人是因为要评高级职称而选择参考软考高级资格考试&#xff0c;那么软考高级里哪个资…

【问题思考总结】第一型曲线积分和第二型曲线积分的区别与联系【从几何知识的角度思考】

此处为曲面积分------>第一型曲面积分的第二型曲面积分的区别与联系【从几何知识的角度思考】 问题 在做题的时候&#xff0c;我发现&#xff0c;关于这方面的知识有很多很多&#xff0c;但是每道题的解法不尽相似&#xff0c;也没有什么具体的体系&#xff0c;尤其是在结…

如何准备2024年的系统设计面试?

1 前言 如果你正在准备软件工程师或软件开发人员的面试,那么你可能知道由于其开放性质和广泛性,准备系统设计是多么困难,但同时你也不能忽略它。在软件工程界,如果你正在申请高级工程师/主管/架构师或更高级别的角色,系统设计是最受追捧的技能,也是整个过程中最重要的环节之一…

米家扩展程序打开第三方应用

米家扩展程序打开第三方应用 - 飞书云文档 (mioffice.cn) 米家扩展程序打开第三方应用 import { Host } from miot;import logger from ../../../utils/logger;const noop undefined; /*** 打开第三方应用。如手机未安装应用将会跳转应用市场。* param schema {string} See: …