DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

app.jsonindex.json中引入组件,默认为ES6版本,ES5引入方式参见快速上手

  1. "usingComponents": {
  2. "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
  3. "van-dropdown-item": "@vant/weapp/dropdown-item/index"
  4. }

代码演示

基础用法

  1. <van-dropdown-menu>
  2. <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  3. <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
  4. </van-dropdown-menu>
  1. Page({
  2. data: {
  3. option1: [
  4. { text: '全部商品', value: 0 },
  5. { text: '新款商品', value: 1 },
  6. { text: '活动商品', value: 2 },
  7. ],
  8. option2: [
  9. { text: '默认排序', value: 'a' },
  10. { text: '好评排序', value: 'b' },
  11. { text: '销量排序', value: 'c' },
  12. ],
  13. value1: 0,
  14. value2: 'a',
  15. },
  16. });

自定义菜单内容

  1. <van-dropdown-menu>
  2. <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  3. <van-dropdown-item id="item" title="{{ itemTitle }}">
  4. <van-cell title="{{ switchTitle1 }}">
  5. <van-switch
  6. slot="right-icon"
  7. size="24px"
  8. style="height: 26px"
  9. checked="{{ switch1 }}"
  10. active-color="#ee0a24"
  11. bind:change="onSwitch1Change"
  12. />
  13. </van-cell>
  14. <van-cell title="{{ switchTitle2 }}">
  15. <van-switch
  16. slot="right-icon"
  17. size="24px"
  18. style="height: 26px"
  19. checked="{{ switch2 }}"
  20. active-color="#ee0a24"
  21. bind:change="onSwitch2Change"
  22. />
  23. </van-cell>
  24. <view style="padding: 5px 16px;">
  25. <van-button type="danger" block round bind:click="onConfirm">
  26. 确认
  27. </van-button>
  28. </view>
  29. </van-dropdown-item>
  30. </van-dropdown-menu>
  1. Page({
  2. data: {
  3. switchTitle1: '包邮',
  4. switchTitle2: '团购',
  5. itemTitle: '筛选',
  6. option1: [
  7. { text: '全部商品', value: 0 },
  8. { text: '新款商品', value: 1 },
  9. { text: '活动商品', value: 2 },
  10. ],
  11. value1: 0,
  12. },
  13. onConfirm() {
  14. this.selectComponent('#item').toggle();
  15. },
  16. onSwitch1Change({ detail }) {
  17. this.setData({ switch1: detail });
  18. },
  19. onSwitch2Change({ detail }) {
  20. this.setData({ switch2: detail });
  21. },
  22. });

自定义选中状态颜色

  1. <van-dropdown-menu active-color="#1989fa">
  2. <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  3. <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
  4. </van-dropdown-menu>

向上展开

  1. <van-dropdown-menu direction="up">
  2. <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  3. <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
  4. </van-dropdown-menu>

禁用菜单

  1. <van-dropdown-menu>
  2. <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
  3. <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
  4. </van-dropdown-menu>

API

DropdownMenu Props

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长,单位毫秒number200
direction菜单展开方向,可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue

DropdownItem Props

参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-

DropdownItem Events

事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

DropdownItem 方法

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态,传true为显示,false为隐藏,不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string

外部样式类

类名说明
custom-class根节点样式类

DropdownMenu 下拉菜单 - 图1