当前位置：首页 > news >正文

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

news 2025/6/21 15:12:43

注释很详细，直接上代码

新增内容：

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