移动端实现彩色导航

一、所需代码

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

二、效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PDF如何转word文档

强烈推荐&#xff1a;Solid Converter PDF https://wzhonghe.com/?p6878#p1 嘎嘎猛&#xff1a; 将PDF文件转换为Word文档并保留原始格式可能会涉及到一些复杂的布局和格式问题。在这里&#xff0c;我将提供一种常见的方法&#xff0c;但请注意&#xff0c;它可能不是100%准…

企业APP软件定制开发的关键步骤|网站小程序搭建

企业APP软件定制开发的关键步骤|网站小程序搭建 在当今数字化快速发展的时代&#xff0c;企业越来越意识到拥有自己的APP软件对于提高业务效率和用户体验的重要性。然而&#xff0c;企业APP软件定制开发并不是一项简单的任务&#xff0c;它需要经过一系列关键步骤来确保最终的产…

Pikachu漏洞练习平台之CSRF(跨站请求伪造)

本质&#xff1a;挟制用户在当前已登录的Web应用程序上执行非本意的操作&#xff08;由客户端发起&#xff09; 耐心看完皮卡丘靶场的这个例子你就明白什么是CSRF了 CSRF(get) 使用提示里给的用户和密码进行登录&#xff08;这里以lili为例&#xff09; 登录成功后显示用户…

【git】远程远程仓库命令操作详解

这篇文章主要是针对git的命令行操作进行讲解&#xff0c;工具操作的基础也是命令行&#xff0c;如果基本命令操作都不理解&#xff0c;就算是会工具操作&#xff0c;真正遇到问题还是一脸懵逼 如果需要查看本地仓库的详细操作可以看我上篇文件 【git】git本地仓库命令操作详解…

vue-router路由(二)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-router路由(二) 目录 1. Vue-Router 的懒加载如何实现 2. 路由的hash和history模式的区别 1…

精益管理3个阶段,如何实现高效企业管理?

在现今竞争激烈的市场环境下&#xff0c;企业需要不断提高经营效率和降低成本来保持竞争力。其中&#xff0c;精益管理是一种不错的管理方式&#xff0c;在各大企业得到广泛的运用。今天我们来了解一下精益管理的3个阶段&#xff0c;以及如何使用精益管理工具来实现高效企业管理…

ubuntu20安装opencv4和opencv_contrib 多版本共存

openCV 卸载 openCV 安装后的源码尽可能保留&#xff0c;因为可以直接从build文件夹下卸载已经安装的openCV. 参考链接&#xff1a;视觉学习笔记10——opencv的卸载、安装与多版本管理 如果已经安装完openCV,后续想重新装&#xff0c;需要先卸载掉安装的openCV. 在ubuntu终端…

实验室EM3电磁铁

锦正茂EM3电磁铁&#xff0c;可以通过更换电磁铁极头在一定范围内改善磁场的大小和磁场的均匀度 &#xff0c;并且可以通过调整极头间距改变磁场的大小。主要用于磁滞现象研究、磁化系数测量、霍尔效应研究、磁光实验、磁场退火、核磁共振、电子顺磁共振、生物学研究、磁性测量…

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

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

【邻接矩阵】

文章目录 邻接矩阵 图的逻辑结构&#xff1a;多对多。 图没有顺序存储结构&#xff0c;但可以借助二维数组来表示元素间的关系。 数组表示法&#xff08;邻接矩阵&#xff09;。 多重链表&#xff1a;邻接表&#xff0c;邻接多重表&#xff0c;十字链表。 邻接矩阵&#xff08;…

Canvas—从入门到案例实现

文章目录 Canvas—从入门到案例实现一、设置canvas环境1.1 <canvas>元素1.2 渲染上下文context 二、形状与路径的绘制2.1 形状绘制2.2 路径绘制2.3 绘制一个笑脸 三、使用样式和颜色四、绘制文本五、使用图像5.1 图片源5.2 获取页面内的图片5.3 缩放Scaling5.4 切片Slici…

深度学习+opencv+python实现车道线检测 - 自动驾驶 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV56 数据集处理7 模型训练8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &am…

Vue3使用i18n国际化

安装 npm install vue-i18nnext 创建i18n文件夹 我这个项目是中、俄语言切换 zh.ts里放中文语言下要显示的字段&#xff0c;rn.ts里放俄语要显示的字段 index.ts import { createI18n } from vue-i18n; import ZH from ./zh.js; import RN from ./rn.js; const messages {zh…

远程创建分支本地VScode看不到分支

在代码存放处右击&#xff0c;点击Git Bash Here 输入git fetch–从远程仓库中获取最新的分支代码和提交历史 就OK啦&#xff0c;现在分支可以正常查看了

【SpringBoot3+Vue3】二【实战篇】-后端

目录 一、环境搭建 1、数据库脚本 2、pom 3、yml 4、通过mybatis-X生成实体pojo等 4.1 Article 4.2 Category 4.3 User 5、 Mapper 5.1 ArticleMapper 5.2 CategoryMapper 5.3 UserMapper 6、service 6.1 ArticleService 6.2 CategoryService 6.3 UserService …

使用亚马逊鲲鹏系统有什么好处?

亚马逊鲲鹏系统是一款能绕过亚马逊智能检测&#xff0c;完全模拟人类真实行为&#xff0c;通过模拟真实的人流量来帮助你提升你的产品排名&#xff0c;让你的产品出现在搜索首页&#xff0c;从而快速帮助提高销售业绩的营销工具&#xff01; 好处1&#xff1a;自动化操作更节约…

Fabric多机部署启动节点与合约部署

这是我搭建的fabric的网络拓扑 3 个 orderer 节点&#xff1b;组织 org1 , org1 下有两个 peer 节点&#xff0c; peer0 和 peer1; 组织 org2 , org2 下有两个 peer 节点&#xff0c; peer0 和 peer1; 以上是我的多机环境的网络拓扑&#xff0c;使用的是docker搭建的。我的网络…

什么是数据泄露?泄露途径有哪些?企业如何免遭数据泄露?

数据泄露指将机密信息、私人信息或其他敏感信息发布到不安全的环境中。数据泄露可能由意外引起&#xff0c;也可能是蓄意攻击的结果。 每年都有数百万人卷入数据泄露&#xff0c;包括意外看错病人图表的医生&#xff0c;以及大规模尝试访问政府计算机以发现敏感信息。 因为敏…

向量矩阵范数pytorch

向量矩阵范数pytorch 矩阵按照某个维度求和&#xff08;dim就是shape数组的下标&#xff09;1. torch1.1 Tensors一些常用函数 一些安装问题cd进不去不去目录PyTorch里面_表示重写内容 在默认情况下&#xff0c;PyTorch会累积梯度&#xff0c;我们需要清除之前的值 范数是向量或…