小程序Vant Weapp的DropdownMen下拉菜单自定义标题

最新推荐文章于 2023-05-16 16:23:21 发布

wujinxia

最新推荐文章于 2023-05-16 16:23:21 发布

阅读量3.9k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 vant weapp

本文链接：https://blog.youkuaiyun.com/wujinxia/article/details/124513611

版权

本文介绍如何在微信小程序中使用Vant Weapp的DropdownMenu组件自定义标题，通过添加change事件和调整CSS样式来实现个性化设置。

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

虽然官方文档没有给出这种样式的，但这次的下拉菜单的自由度还是比较大一点的，可以自定义标题，只要加个change事件就可以更改了。
在这里插入图片描述
参考：Vant Weapp的DropdownMenu 下拉菜单官方文档

题外话：
下拉菜单有个边框阴影，怪丑的，在css里覆盖掉。

.dropdown-menu{
   
  box-shadow: 0 0 0 !important; /* 取消边框的阴影*/
}

逻辑大概是：wxml中的题目 title 是{ { classTitle }}，选项变化的时候触发事件 classChange ，classChange 根据选项的值value更改 classTitle ：
值为0的时候 classTitle = ‘分类’
不为0时 classTitle = option_class[value]

wxml中：

<van-dropdown-menu custom-class="dropdown-menu" active-color="#1989fa">
        <van-dropdown-item title="{
   { classTitle }}" value="{
   { value_class }}" options="{
   { option_cl