移动端实现彩色导航

news2024/11/17 11:42:59

一、所需代码

(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];
  }
}

二、效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1211374.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024年软件测试知识应运趋势

每一年&#xff0c;IT互联网技术都在变&#xff0c;那2024年&#xff0c;需要具备哪些知识&#xff0c;才能让我们在软件测试行业里混得风生水起呢&#xff1f; 我认为有以下十点&#xff1a; 1、Linux必备知识 Linux作为现在最流行的软件环境系统&#xff0c;一定需要掌握&am…

怎样读取sd卡中的内容?正确操作方法要记好!

“我想问问大家sd卡中的内存怎么才能在电脑上读取呢&#xff1f;有什么方法可以快速读取到sd卡中的内容吗&#xff1f;非常感谢&#xff01;” 作为一个小巧又便携的存储设备&#xff0c;SD卡在人们的生活中越来越常见。但许多用户可能不清楚如何在电脑上读取其内容。 今天小编…

Q learning算法

Q learning算法 代码仓库:https://github.com/daiyizheng/DL/tree/master/09-rl Q Learning是强化学习算法中的一个经典算法。在一个决策过程中&#xff0c;我们不知道完整的计算模型&#xff0c;所以需要我们去不停的尝试。 算法流程 整体流程如下&#xff1a; Q-table 初…

C++之使用std::move与否的实例区别(二百五十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Cesium 展示——坐标间的转换

文章目录 需求1. 点击位置会后获取的地球坐标2. 笛卡尔坐标(Cartesian3)3. 地理坐标系分析转换关系如下需求 坐标间的转换 1. 点击位置会后获取的地球坐标 Cesium点击位置会后获取的地球坐标。 2. 笛卡尔坐标(Cartesian3) 笛卡尔坐标系中,表示一个在 x 轴上、y轴上、…

Centos7 单用户模式修改密码 3步搞定 666 (百分比成功)

1.第一步重新服务器 2.进入这个页面按e进入单用户模式 3.找到linux16这行 在后面添加 init/bin/bash 按ctrlx进入 4.注意是事项直接修改是报错passud: Authentication token manipulation error 需要执行权限&#xff1a;mount -o remount,rw /

抽象 I/O设备模型

I/O设备模型框架 RT-Thread提供了一套简单的I/O设备模型框架。 如图所示&#xff0c;它位于硬件和应用程序之间&#xff0c;共分成三层&#xff0c;从上到下分别是I/O设备管理层、设备驱动框架层、设备驱动层。 应用程序通过I/O设备管理接口获得正确的设备驱动&#xff0c;然…

四川竹哲电子商务有限公司怎么样?是真的吗

在当今数字化时代&#xff0c;抖音电商服务逐渐成为了企业营销的重要手段。在这个充满机遇与挑战的领域&#xff0c;四川竹哲电子商务有限公司以其卓越的服务质量&#xff0c;成为了行业内的佼佼者。本文将详细介绍四川竹哲电子商务有限公司的抖音电商服务&#xff0c;帮助您了…

宏基因组分析项目再创新,汞元素循环

汞&#xff08;Hg&#xff09;是一种具有强烈神经毒性的元素&#xff0c;其单质以及多种化合物都有不同程度的毒性&#xff0c;会造成慢性中毒。汞是一种全球性污染物&#xff0c;大气中的汞可通过干湿沉降进入地表水和土壤&#xff0c;环境因素的变化可导致汞的转化。从无机汞…

如何使用iPhone15在办公室观看家里电脑上的4k电影?

如何使用iPhone15在办公室观看家里电脑上的4k电影&#xff1f; 文章目录 如何使用iPhone15在办公室观看家里电脑上的4k电影&#xff1f;1.使用环境要求&#xff1a;2.下载群晖videostation&#xff1a;3.公网访问本地群晖videostation中的电影&#xff1a;4.公网条件下使用电脑…

BUUCTF 荷兰宽带数据泄露 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 下载附件&#xff0c;解压得到一个.bin文件。 密文&#xff1a; 解题思路&#xff1a; 1、刚开始没什么思路&#xff0c;看了别人的题解&#xff0c;了解到一个新工具RouterPassView。大多数现代路由器都可以让您备…

【JavaEE】Servlet API 详解(HttpServletResponse类方法演示、实现自动刷新、实现自动重定向)

一、HttpServletResponse HttpServletResponse表示一个HTTP响应 Servlet 中的 doXXX 方法的目的就是根据请求计算得到相应, 然后把响应的数据设置到 HttpServletResponse 对象中 然后 Tomcat 就会把这个 HttpServletResponse 对象按照 HTTP 协议的格式, 转成一个字符串, 并通…

2024CFA一级二级三级双机构网课资源

复习流程 我自己的复习流程是这样的&#xff0c;按照这个踏实去复习的话100&#xff05;可以过&#xff1a; 第一轮学习&#xff08;30-40天左右&#xff09;&#xff1a;把所有reading学习一遍&#xff0c;每天上午看新的reading&#xff0c;下午复习前一天上午学习的reading…

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

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

记一次线上问题引发的对 Mysql 锁机制分析 | 京东物流技术团队

背景 最近双十一开门红期间组内出现了一次因 Mysql 死锁导致的线上问题&#xff0c;当时从监控可以看到数据库活跃连接数飙升&#xff0c;导致应用层数据库连接池被打满&#xff0c;后续所有请求都因获取不到连接而失败 整体业务代码精简逻辑如下&#xff1a; Transaction p…

算法通关村——数组中第K大的数字

数组中第K大的数字 1、题目描述 ​ LeetCode215. 数组中的第K个最大元素。给定整数数组nums和整数k&#xff0c;请返回数组中第k个最大的元素。请注意&#xff0c;你需要找的是数组排序后的第k个最大的元素&#xff0c;而不是第k个不同的元素。 示例1&#xff1a; 输入&#…

五、nacos安装指南

Nacos安装指南 1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; GitHub主页&#xff1a;https://github.com/alibaba/nacos GitHub的Release下载…

【Web 实战】记一次攻防实战

经典开局一个登录框 由于漏洞应该还未修复。对于数据和相关网址打个码见谅一下 常规思路&#xff08;爆破&#xff09; 常规操作进行一波 尝试弱口令然后开始爆破 对于此种有验证码的爆破&#xff0c;可以借用一个bp插件。 captcha-killer-modified-jdk14.jar 具体使用我就…

centos8 执行yum install ntpdate命令,报错未找到匹配的参数: ntpdate

1、执行 yum install ntpdate 报错 上次元数据过期检查&#xff1a;1:17:06 前&#xff0c;执行于 2023年11月15日 星期三 10时32分18秒。 未找到匹配的参数: ntpdate 错误&#xff1a;没有任何匹配: ntpdate 报错截图&#xff1a; 2、CentOS8系统中&#xff0c;原有的时间…