DropdownMenu 下拉菜单的使用

官方例子 ：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].text
    this.setData({
      menuText: selValue
    })
  },
})