DropdownMenu 下拉菜单的使用

最新推荐文章于 2025-06-27 09:08:38 发布

xie_lion

最新推荐文章于 2025-06-27 09:08:38 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序 Vant 文章标签：小程序

本文链接：https://blog.youkuaiyun.com/xie_candy/article/details/120440097

微信小程序同时被 2 个专栏收录

13 篇文章

订阅专栏

Vant

6 篇文章

订阅专栏

本文介绍 VantWeapp 中下拉菜单组件的使用方法，包括如何配置选项、响应事件及实现动态加载数据等功能。通过示例代码展示了如何在小程序中集成并使用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方例子：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
    })
  },
})