移动端实现彩色导航

一、所需代码

(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.hqwc.cn/news/177638.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自己写的一个BMP转PNG工具BMP2PNG

写这个工具是因为要使用传奇的部分素材在COCOS2DX使用&#xff0c; 但是COCOS2DX不支持BMP 如果直接将BMP转换到PNG的话&#xff0c;网上找到的工具都不支持透明色转换。难道要用PS一个一个抠图吗&#xff1f;要累死 所以写了这个工具。一些古老的游戏比如 千年 传奇 都是BMP…

代码随想录算法训练营第五十三天丨 动态规划part14

1143.最长公共子序列 思路 本题和动态规划&#xff1a;718. 最长重复子数组 (opens new window)区别在于这里不要求是连续的了&#xff0c;但要有相对顺序&#xff0c;即&#xff1a;"ace" 是 "abcde" 的子序列&#xff0c;但 "aec" 不是 &quo…

arf_1解题

arf_1解题 镜像环境 version: 3.2services:web:image: registry.cn-hangzhou.aliyuncs.com/n1book/web-file-read-1:latestports:- 80:80新建yml文件将代码保存在当前位置 使用docker-compost up -d 拉取镜像 解题 访问该镜像映射端口为1520 可以看到页面只有一个holle但…

光纤接入网是怎么操作

大家还记得我们通过运营商提供的网线甚至是电话线上网的经历吧&#xff0c;那时上网使用xDSL&#xff08;数字用户线路&#xff0c;Digital Subscriber Line&#xff09;网络技术&#xff0c;xDSL技术是数字用户线路的所有类型的总称&#xff0c;包括RADSL、SDSL、HDSL、ADSL、…

【python】Django——连接mysql数据库

笔记为自我总结整理的学习笔记&#xff0c;若有错误欢迎指出哟~ 【Django专栏】 Django——django简介、django安装、创建项目、快速上手 Django——templates模板、静态文件、django模板语法、请求和响应 Django——连接mysql数据库 Django——连接mysql数据库 连接MySQL数据库…

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

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

Linux arm64异常简介和系统调用过程

文章目录 一、异常简介1.1 Exception levels1.2 异常类型 二、系统调用简介2.1 SVC指令2.2 VBAR2.3 系统调用保存现场2.4 系统调用返回 三、Linux 内核分析参考资料 一、异常简介 在ARM64体系架构中&#xff0c;异常是处理器在执行指令时可能遇到的不寻常情况或事件。这些异常…

CountDownLatch使用

常用于多线程场景&#xff0c;待多线程都结束后方可继续主线程逻辑处理 CodeConstant 常量类 import java.util.HashMap; import java.util.Map;public class CodeConstant {public static final Map<String, Map<String, String>> CODE new HashMap<>();…

Android 启动优化案例-WebView非预期初始化排查

作者&#xff1a;邹阿涛涛涛涛涛涛 去年年底做启动优化时&#xff0c;有个比较好玩的 case 给大家分享下&#xff0c;希望大家能从我的分享里 get 到我在做一些问题排查修复时是怎么看上去又low又土又高效的。 1. 现象 在我们使用 Perfetto 进行app 启动过程性能观测时&#…

2023年【电工(高级)】考试报名及电工(高级)考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【电工&#xff08;高级&#xff09;】考试报名及电工&#xff08;高级&#xff09;考试试卷&#xff0c;包含电工&#xff08;高级&#xff09;考试报名答案和解析及电工&#xff08;高级&#xff09;考试试卷…

isomorphic-fetch库代码示例

isomorphic-fetch库的爬虫程序。 typescript // 引入isomorphic-fetch库 import fetch from isomorphic-fetch; // 设置 const proxy ; // 定义视频URL const url ; // 使用fetch获取视频数据 fetch(url, { method: GET, headers: { Accept: application/json, …

2023 PostgreSQL 数据库生态大会:解读拓数派大数据计算系统及其云存储底座

11月3日-5日&#xff0c;由中国开源软件推进联盟 PostgreSQL 分会主办的中国 PostgreSQL 数据库生态大会在北京中科院软件所隆重举行。大会以”极速进化融合新生”为主题&#xff0c;从线下会场和线上直播两种方式展开&#xff0c;邀请了数十位院士、教授、高管和社群专家&…