虽然官方文档没有给出这种样式的，但这次的下拉菜单的自由度还是比较大一点的，可以自定义标题，只要加个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
})
}
},
})
