微信小程序(二十一)css变量-定义页面主题色

注释很详细,直接上代码

上一篇

新增内容:
1.使用css变量
2.消除按钮白块影响
3.修改图标样式

源码:

npmTest.json

{"navigationStyle": "custom","usingComponents": {//引入vant组件"van-nav-bar": "@vant/weapp/nav-bar/index"}
}

npmTest.wxml

<van-nav-bartitle="标题"left-text="返回"right-text="按钮"left-arrowbind:click-left="onClickLeft"bind:click-right="onClickRight"
/><van-nav-bartitle="标题"left-text="返回"right-text="按钮"left-arrowbind:click-left="onClickLeft"bind:click-right="onClickRight"
/><van-nav-bartitle="标题"left-text="返回"right-text="按钮"left-arrowbind:click-left="onClickLeft"bind:click-right="onClickRight"
/>

npmTest.wxss

//在页面根节点定义颜色
page{--primary-color:#ff976a
}
//在第一个控件使用颜色
//var(变量名)
van-nav-bar:nth-of-type(1) .van-nav-bar__content{background-color: var(--primary-color);
}van-nav-bar:nth-of-type(2) .van-nav-bar__content{background-color:  var(--primary-color);
}van-nav-bar:nth-of-type(3) .van-nav-bar__content{background-color:  var(--primary-color);
}
//将按钮按下颜色改为透明
//记得加!important
.van-nav-bar__text--hover{background-color: transparent !important;
}
//修改图标颜色
//开发者工具常常无法显示伪类(自行判断)
.van-icon-arrow-left::before {color: red;
}

效果演示:

在这里插入图片描述

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

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

相关文章

Pg分区表配置与实现

数据库加速查询的方法&#xff0c;包括添加索引&#xff0c;调整数据库引擎的参数&#xff0c;将日志目录放单独的磁盘分区等。实际应用中&#xff0c;历史数据会随着时间推移逐渐增多&#xff0c;且重要性逐渐降低&#xff0c;但又不能轻易删除。此时可考虑将该表按某个时间字…

[libwebsockets]lighttpd+libwebsockets支持ws和wss配置方法说明

libwebsockets介绍 libwebsockets是一款轻量级用来开发服务器和客户端的C库。它不仅支持ws,wss还同时支持http与https,可以轻轻松松结合openssl等库来实现ssl加密。 官方参考链接: https://libwebsockets.org/ lighttpd版本 lighttpd/1.4.59 (ssl) - a light and fast w…

Linux多线程——线程池

本章Gitee仓库&#xff1a;线程池、单例模式 文章目录 1. 池化技术简述2. 线程池3. 单例模式3.1 单例模式特点3.2 饿汉方式和懒汉方式3.3 单例模式线程安全 1. 池化技术简述 C中的STL&#xff0c;当空间不够时&#xff0c;会自动扩容&#xff0c;这个并不是我们需要多少&#…

sqli-labs闯关

目录 1.安装靶场2.了解几个sql常用知识2.1联合查询union用法2.2MySQL中的通配符&#xff1a;2.3常用函数2.4数据分组 3.mysql中重要的数据库和表4.开始闯关4.1 Less-14.1.1 首先进行一次常规的注入4.1.2 深入解析 1.安装靶场 1.首先推荐使用github下载靶场源码 https://githu…

Matlab处理excel数据

我们新建个excel文档&#xff0c;用Matlab读取里面的内容&#xff0c;计算和判断里面的计算结果是否正确&#xff0c;并打印到另一个文档当中。 新建文档 新建输入文档&#xff0c;文件名TestExcel 编写脚本 [num,txt] xlsread(TestExcel.xlsx); SNcode num(:,1);%从序号中…

《微信小程序开发从入门到实战》学习九十六

7.2 基础内容组件 7.2.4 progress组件 progress组件的示例代码如下&#xff1a; <progress percent"20" show-info /> 7.3 表单组件 表单组件是用于收集信息的组件。第三章介绍了许多表单组件&#xff0c;包括form、input、textarea、picker、switch、butt…

【数据分析】numpy基础第五天

文章目录 前言Z-Score标准化Z-Score应用示例 Min-Max归一化Min-Max应用示例 总结 前言 第五天是我们的numpy学习计划中的最后一天。 在数据处理和数据分析中&#xff0c;数据预处理是非常重要的一步。我们不可能完全靠肉眼来分析数据&#xff0c;总会有用到各种算法模型的时候…

eclipse启动Java服务及注意事项

1、导入项目 选择file——》import…——》Generate——》Exiting Projects into Workspace——》选择要导入的项目 2、添加tomcat 1&#xff09;点击Serves——》No servers are available. Click this link to create a new server… 2&#xff09;点击“Add…” 3&…

YOLO 全面回顾:从最初的YOLOv1到最新的YOLOv8、YOLO-NAS,以及整合了 Transformers 的 YOLO

YOLO 全面回顾 综述评估指标YOLO v1YOLO v2YOLO v3YOLO v4YOLOv5 与 Scaled-YOLOv4 YOLORYOLOXYOLOv6YOLOv7DAMO-YOLOYOLOv8PP-YOLO, PP-YOLOv2, and PP-YOLOEYOLO-NASYOLO with Transformers 综述 论文&#xff1a;https://arxiv.org/pdf/2304.00501.pdf 代码&#xff1a;gi…

MySQL知识点总结(一)——一条SQL的执行过程、索引底层数据结构、一级索引和二级索引、索引失效、索引覆盖、索引下推

MySQL知识点总结&#xff08;一&#xff09;——一条SQL的执行过程、索引底层数据结构、一级索引和二级索引、索引失效、索引覆盖、索引下推 一条SQL的执行过程索引底层数据结构为什么不使用二叉树&#xff1f;为什么不使用红黑树?为什么不使用hash表&#xff1f;为什么不使用…

Windows Qt C++ VTK 绘制三维曲线

Qt 自带数据可视化从文档上看&#xff0c;只能实现三维曲面。 QwtPlot3D在Qt6.6.0上没编译通过。 QCustomPlot 只能搞二维。 VTK~搞起。抄官网demo。 后续需求&#xff1a; 1、对数轴 2、Y轴逆序 3、Z轴值给色带&#xff0c;类似等高线图的色带 期待各位大佬多多指导。…

ad18学习笔记十六:v割

所谓“V割”是印刷电路板&#xff08;PCB&#xff09;厂商依据客户的图纸要求&#xff0c;事先在PCB的特定位置用转盘刀具切割好的一条条分割线&#xff0c;其目的是为了方便后续SMT电路板组装完成后的分板之用&#xff0c;因为其切割后的外型看起来就像个英文的“V”字型&…

C++从初级工程师到中级工程师【个人学习笔记】

目录 1 背景2 要点2.1 内存分区模型2.1.1 程序运行前2.1.2 代码 2.2.1 程序运行后栈区代码 1 背景 从这一章开始&#xff0c;开始学习C的面向对象编程&#xff0c;是C中的核心。 2 要点 2.1 内存分区模型 C程序在执行时&#xff0c;将内存大方向划分为4个区域 代码区&…

vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范&#xff0c;需要使用eslintstylelintprettier来对我们的代码质量做检测和修复&#xff0c;需要使用husky来做commit拦截&#xff0c;需要使用commitlint来统一提交规范&#xff0c;需要使用preinst…

智能音箱喇叭杂音问题

智能音箱喇叭杂音问题 智能音箱生厂或出货过程会遇到多种喇叭播放有杂音的问题&#xff0e; 螺丝不匹配 智能音箱设备在生产过程&#xff0c;会有SPL测试喇叭失真&#xff0c;发现不良率8%的杂音问题&#xff0e; 分析原因是来料导入了新螺丝&#xff0c; 使用过程进入异物…

Python笔记15-实战小游戏飞机大战(中)

文章目录 创建第一个敌机创建一群敌机创建多行敌机让敌机移动射杀敌机生成新的敌机群结束游戏有敌机到达屏幕底端游戏结束 在上一篇基础上继续 本示例源码地址 点击下载 创建第一个敌机 在屏幕上放置外星人与放置飞船类似。每个外星人的行为都由Alien 类控制&#xff0c;我们…

List集合根据对象某个元素去重

序言 检视代码时有下面这样一段代码&#xff08;已脱敏处理&#xff09;&#xff0c; import java.util.*; import java.util.concurrent.ConcurrentHashMap; import java.util.function.Function; import java.util.function.Predicate; import java.util.stream.Collectors…

力扣0107——二叉树的层序遍历II

二叉树的层序遍历II 难度&#xff1a;中等 题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节点所在层到根节点所在的层&#xff0c;逐层从左向右遍历&#xff09; 示例1 输入&#xff1a; inorder [9,3,15,20…

docker 部署xxl-job

docker 部署xxl-job XXL-JOB github地址 https://github.com/xuxueli/xxl-job XXL-JOB 文档地址 https://www.xuxueli.com/xxl-job/ XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品…

利用ChatGPT提升工作效率的专业指南

利用ChatGPT提升工作效率的专业指南 一、引言 在数字化时代&#xff0c;人工智能助手已经成为提高工作效率的必备工具。其中&#xff0c;ChatGPT以其强大的自然语言处理能力&#xff0c;为我们提供了全新的工作方式。本文将深入探讨如何利用ChatGPT在各个工作领域中提升效率&a…