官方例子 :Vant Weapp - 轻量、可靠的小程序 UI 组件库
官方的代码演示不够详细,这里记录一下,效果图
注意事件是写在<van-dropdown-item> 里,如:bind:opened="onOpenDropdown"
wxml:
<view class=" custom-flex-row-start van-hairline--bottom"><text>仓库:</text><van-dropdown-menu active-color="#4859E5" ><van-dropdown-item options="{{ option }}" title="{{menuText}}" title-class="color-blue" bind:opened="onOpenDropdown" bind:change="onChangeDropdown" /></van-dropdown-menu></view>
js:
const app = getApp()Page({data: {menuText: '请选择',option: [{ text: 'aaa', value: 0 },{ text: 'bbbb', value: 1 },{ text: 'cccc', value: 2 },],},//打开下拉菜单--获取仓库接口onOpenDropdown(){let url = "path"let data = {sessionKey: wx.getStorageSync('sessionKey'),}app.wxRequest('get',url,data,(res)=>{console.log(res)},(err)=>{console.log(err)})},//下拉菜单发生变化onChangeDropdown(event){// console.log(event.detail)let selValue = this.data.option[event.detail].textthis.setData({menuText: selValue})},})