微信小程序-Vant-dropdown-组件自定义样式
目录
微信小程序 Vant dropdown 组件自定义样式
微信小程序 Vant dropdown 组件自定义样式
- 很普通地使用了
van-dropdown-menu和van-dropdown-item组件 - 但如下图所示，默认 vant 组件样式有问题，无法融入背景色。
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item value="{{ value }}" options="{{ option }}" bind:change="onChange" />
</van-dropdown-menu>解决方案
- 添加
custom-class字段
<van-dropdown-menu active-color="#1989fa" custom-class="dropdown">
<van-dropdown-item value="{{ value }}" options="{{ option }}" bind:change="onChange" />
</van-dropdown-menu>- 在
.wxss文件中添加对应的.dropdown样式
.dropdown {
margin-right: 5px;
--dropdown-menu-background-color: #2E75B6;
--dropdown-menu-title-text-color: #ffffff;
}- 完成
原理
- 首先看
miniprogram_npm\@vant\weapp\dropdown-menu\index.wxml - 这里预留了一个用户自定义样式类
- 查看
miniprogram_npm\@vant\weapp\dropdown-menu\index.wxss - 用户能够自定义的属性都在这里了
（dropdown类名是可以自定义的）
