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

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

因为组件自带的颜色是红色,不符合项目的需求,直接用是这样的,如图:
在这里插入图片描述
但是在他的官方给出的参数中没有直接能变更颜色的参数,下面是它定义边框颜色的名字,我们只需要在自己的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;
}

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

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序使用 Vant 组件库的侧边导航栏滚动,需要首先在项目中引入 Vant 组件库,并且按照 Vant 的文档进行组件的配置和使用。 首先,在项目根目录下的 `app.json` 文件中配置 Vant 组件的全局样式,示例如下: ```json { "style": "vant-weapp/dist/common/index" } ``` 然后在需要使用侧边导航栏滚动的页面中引入 Vant侧边导航栏组件,并按照需求设置好相关属性和事件,示例如下: ```html <van-sidebar show="{{ true }}" width="200rpx" :style="height: 100vh;"> <van-sidebar-item v-for="(item, index) in menuList" :key="index" :title="item.title" :dot="item.dot" :badge="item.badge" /> </van-sidebar> ``` 其中,`show` 属性用于控制侧边导航栏的显示与隐藏,`width` 属性用于设置导航栏的宽度,`:style` 属性用于设置导航栏的高度为可视区域的高度。 此外,需要根据实际需求在 `data` 数据中定义 `menuList` 数组,并为每个侧边导航栏项设置相应的标题、角标和小红点。 最后,在页面的生命周期函数中,通过监听滚动事件来实现侧边导航栏的滚动效果,示例如下: ```javascript Page({ onScroll: function(event) { // 根据滚动位置处理侧边导航栏的样式 } }) ``` 在监听滚动事件中,可以根据滚动位置来处理侧边导航栏的样式,例如高亮当前正在滚动的导航项。 总结起来,要在微信小程序使用 Vant 组件库的侧边导航栏滚动,需要首先引入 Vant 组件库并进行配置,然后在页面中按照需求引入侧边导航栏组件并设置相应的属性和事件,最后在监听滚动事件中处理导航栏的样式即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值