记录微信小程序使用Vant Weapp-Sidebar 侧边导航，更改它的边框颜色

最新推荐文章于 2025-02-26 09:00:00 发布

岸北

最新推荐文章于 2025-02-26 09:00:00 发布

阅读量3.5k

点赞数 4

文章标签：微信小程序

本文链接：https://blog.csdn.net/chaogelilun/article/details/130081797

版权

当组件默认颜色不满足项目需求时，可以通过在Wxss文件中重写类名改变边框颜色。例如，修改van-sidebar-item--selected的border-color和背景色，实现与项目风格一致的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为组件自带的颜色是红色，不符合项目的需求，直接用是这样的，如图：
在这里插入图片描述
但是在他的官方给出的参数中没有直接能变更颜色的参数，下面是它定义边框颜色的名字，我们只需要在自己的Wxss文件里重写一下这个class就可以了，代码如下：
wxml文件：

<view class="main">
  <van-sidebar active-key="{{ activeKey }}">
  <van-sidebar-item title="标签名" dot />
  <van-sidebar-item title="标签名" badge="5" />
  <van-sidebar-item title="标签名" badge="99+" />
</van-sidebar>
</view>

wxss文件：

.main .van-sidebar-item--selected{
  border-color: var(--main-color) !important;
  background-color: white;
}

现在运行就会是项目需要的颜色了，如图：
在这里插入图片描述