一、需求说明
在 UniApp Vue2 项目中，导航栏文字、底部下划线为静态白色，现需要从本地缓存读取自定义颜色值 ，动态控制文字颜色与 :after 伪类下划线颜色。
二、技术难点
-
普通 DOM 元素可通过行内
:style动态改色； -
CSS 伪类（:after / :before）不属于 DOM 节点 ，无法直接绑定行内样式，需借助 CSS 变量实现动态赋值。
三、完整实现步骤
1. JS 逻辑：读取本地缓存色值
在页面 data 中定义变量，从缓存读取配色，并设置默认值防止空值失效。
export default { data() { return { // 读取缓存中的导航栏颜色，无数据则默认白色 userHeaderBackground: uni.getStorageSync('navigationBarColor') || '#FFFFFF' } } }
2. 模板改造：绑定行内样式 + 注入 CSS 变量
-
外层容器挂载自定义 CSS 变量，供伪类使用；
-
导航子项通过
:style动态绑定文字颜色。
<template> <view class="ss-scroll-navbar" :style="{'--nav-active-color': userHeaderBackground}" > <view class="nav-item" :style="{color: userHeaderBackground}"> <view class="title">导航选项</view> </view> </view> </template>
3. SCSS 样式：通过 CSS 变量替换静态色值
删除样式内静态颜色，伪类使用 var(变量名) 读取动态颜色，同时修正代码中 upx 拼写错误（UniApp 标准单位为 rpx）。
.ss-scroll-navbar { width: 100%; height: 80rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, .06); white-space: nowrap; text-align: start; .nav-item { height: 80rpx; text-align: center; padding: 0rpx 20rpx; display: inline-block; position: relative; font-size: 32rpx; .title { line-height: 80rpx; } &:after { content: ''; width: 0; height: 0; /* 使用动态CSS变量 */ border-bottom: 4rpx solid var(--nav-active-color); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); transition: .3s; } } }
四、颜色实时更新（拓展）
若项目支持手动切换颜色并持久化到本地缓存，修改变量后视图会自动刷新：
methods: { // 切换自定义颜色 changeNavColor(color) { uni.setStorageSync('navigationBarColor', color) this.userHeaderBackground = color } }