小程序vant weapp

小程序vant weapp中van-picker选择器如何改成select一样的下拉选
例如值为:[{ label:'张三' , value:'3' }]
可以传值为对象形式,并且选择后显示label但是值为value

Vant Weapp中的van-picker选择器默认是显示为滚动选择器的方式,如果您需要将其改成下拉选择框的形式,可以使用Vant Weapp提供的 van-dropdown-menu 组件来实现。
具体操作步骤如下:

  1. 在需要使用下拉选择框的页面中,引入 van-dropdown-menu 组件:
//index.wxml
<van-dropdown-menu :list="list" @click-item="onClickItem" />
  1. 在页面的js文件中,定义 list 数组来存储下拉选项的数据:
//index.js
Page({
  data:{
    list: [
      { label: '张三', value: '3' },
      { label: '李四', value: '4' },
      { label: '王五', value: '5' }
    ]
  },
  onClickItem(event) {
    console.log(event.detail);
  }
});
  1. onClickItem 方法中,可以获取到用户所选择的下拉选项的值和文本:
onClickItem(event) {
    console.log(event.detail);
    // { value: '3', label: '张三' }
}

上述代码中,通过 van-dropdown-menu 组件的 list 属性来指定下拉选项的数据,每个选项包含 labelvalue 两个属性。当用户选择某个选项后,会触发 onClickItem 方法,并通过 event.detail 获取用户所选择的选项的值和文本。
需要注意的是,虽然下拉选择框的使用方式与van-picker选择器有所不同,但可以通过Vant Weapp提供的组件实现类似的效果。