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

最新推荐文章于 2026-05-18 09:23:25 发布

原创最新推荐文章于 2026-05-18 09:23:25 发布 · 4k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #vant weapp

微信小程序专栏收录该内容

7 篇文章

订阅专栏

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

虽然官方文档没有给出这种样式的，但这次的下拉菜单的自由度还是比较大一点的，可以自定义标题，只要加个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_class }}"  bind:change = "classChange" />
</van-dropdown-menu>

js中：
classArray 是分类数据的数组，大家可以根据自己的数据更改。

var classArray = []

Page({
  // 页面的初始数据
  data: {
    option_class: [{ text: '全部', value: 0},],
    value_class: 0,
    classTitle: '分类'
  },
  
  onLoad: function (options) {
    this.getClassRecord() //获得分类的数据
  },

  // 获得分类的数据
  getClassRecord() {
    var that = this
    //从云函数处获得分类的数据，大家可以根据自己的数据处理自己编写
    commonSelect.getClassRecord() 
    .then((res) => {
      classArray = res
      const option_class = that.data.option_class
      // 因为'全部'占第一个，所以option_class新增的下标得从1开始
      for(var i=1; i<= classArray.length; i++){
        option_class.push({})
        option_class[i].text = classArray[i-1].className
        option_class[i].value = i
      }
      that.setData({
        option_class: option_class,
      })
    }).catch((err) =>{
      console.log("错误：", err)
    })
  },

  // 点击选项变化时触发
  classChange( event){
    // console.log( event)
    if(event.detail === 0){
      this.setData({
        classTitle: '分类'
      })
    }else{
      this.setData({
        classTitle: this.data.option_class[event.detail].text
      })
    }
  },
  
})