小程序vant weapp中van-picker选择器如何改成select一样的下拉选
例如值为:[{ label:'张三' , value:'3' }]
可以传值为对象形式,并且选择后显示label但是值为value
Vant Weapp中的van-picker选择器默认是显示为滚动选择器的方式,如果您需要将其改成下拉选择框的形式,可以使用Vant Weapp提供的 van-dropdown-menu
组件来实现。
具体操作步骤如下:
van-dropdown-menu
组件://index.wxml
<van-dropdown-menu :list="list" @click-item="onClickItem" />
list
数组来存储下拉选项的数据://index.js
Page({
data:{
list: [
{ label: '张三', value: '3' },
{ label: '李四', value: '4' },
{ label: '王五', value: '5' }
]
},
onClickItem(event) {
console.log(event.detail);
}
});
onClickItem
方法中,可以获取到用户所选择的下拉选项的值和文本:onClickItem(event) {
console.log(event.detail);
// { value: '3', label: '张三' }
}
上述代码中,通过 van-dropdown-menu
组件的 list
属性来指定下拉选项的数据,每个选项包含 label
和 value
两个属性。当用户选择某个选项后,会触发 onClickItem
方法,并通过 event.detail
获取用户所选择的选项的值和文本。
需要注意的是,虽然下拉选择框的使用方式与van-picker选择器有所不同,但可以通过Vant Weapp提供的组件实现类似的效果。