Back to Vant Weapp

DropdownMenu 下拉菜单

packages/dropdown-menu/README.md

1.11.77.1 KB
Original Source

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

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

json
"usingComponents": {
  "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
  "van-dropdown-item": "@vant/weapp/dropdown-item/index"
}

代码演示

基础用法

html
<van-dropdown-menu>
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>
js
Page({
  data: {
    option1: [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ],
    option2: [
      { text: '默认排序', value: 'a' },
      { text: '好评排序', value: 'b' },
      { text: '销量排序', value: 'c' },
    ],
    value1: 0,
    value2: 'a',
  },
});

自定义菜单内容

html
<van-dropdown-menu>
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  <van-dropdown-item id="item" title="{{ itemTitle }}">
    <van-cell title="{{ switchTitle1 }}">
      <van-switch
        slot="right-icon"
        size="24px"
        style="height: 26px"
        checked="{{ switch1 }}"
        active-color="#ee0a24"
        bind:change="onSwitch1Change"
      />
    </van-cell>
    <van-cell title="{{ switchTitle2 }}">
      <van-switch
        slot="right-icon"
        size="24px"
        style="height: 26px"
        checked="{{ switch2 }}"
        active-color="#ee0a24"
        bind:change="onSwitch2Change"
      />
    </van-cell>
    <view style="padding: 5px 16px;">
      <van-button type="danger" block round bind:click="onConfirm">
        确认
      </van-button>
    </view>
  </van-dropdown-item>
</van-dropdown-menu>
js
Page({
  data: {
    switchTitle1: '包邮',
    switchTitle2: '团购',
    itemTitle: '筛选',
    option1: [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ],
    value1: 0,
  },

  onConfirm() {
    this.selectComponent('#item').toggle();
  },

  onSwitch1Change({ detail }) {
    this.setData({ switch1: detail });
  },

  onSwitch2Change({ detail }) {
    this.setData({ switch2: detail });
  },
});

自定义选中状态颜色

html
<van-dropdown-menu active-color="#1989fa">
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>

向上展开

html
<van-dropdown-menu direction="up">
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>

禁用菜单

html
<van-dropdown-menu>
  <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
  <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
</van-dropdown-menu>

异步打开/关闭

通过 before-toggle 事件可以在下拉菜单打开或者关闭前执行特定的逻辑,实现状态变更前校验、异步打开/关闭的目的

html
<van-dropdown-menu>
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" use-before-toggle bind:before-toggle="onBeforeChange" />
</van-dropdown-menu>
js
Page({
  data: {
    value1: 0,
     option1: [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ],
  },
  onBeforeChange({ detail: { status, callback }}) {
    wx.showModal({
      title: '异步打开/关闭',
      content: `确定要${status ? '打开' : '关闭'}下拉菜单吗?`,
      success: (res) => {
        if (res.confirm) {
          callback(true)
        } else if (res.cancel) {
          callback(false)
        }
      },
    })
  }
});

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长,单位毫秒number200
direction菜单展开方向,可选值为 upstringdown
overlay是否显示遮罩层booleantrue
safe-area-tab-bar v1.10.14是否留出底部 tabbar 安全距离booleanfalse
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名,建议使用自定义样式 item-title-class 代替string-
popup-style自定义弹出层样式string-
use-before-toggle v1.10.12是否开启下拉菜单打开或者关闭前校验booleanfalse
root-portal v1.10.14是否从页面子树中脱离出来,用于解决各种 fixed 失效问题,微信基础库 >= 2.25.2 booleanfalse
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-
before-toggle v1.10.12下拉菜单打开或者关闭前触发,需要将use-before-toggle属性设置为trueevent.detail.status: true 打开下拉菜单,false 关闭下拉菜单
event.detail.callback: 回调函数,调用callback(false)终止下拉菜单状态变更

通过 selectComponent(id) 可访问。

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

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
类名说明
custom-class根节点样式类
title-class v1.10.7选中项样式类
类名说明
custom-class v1.10.7根节点样式类
item-title-class v1.10.7选项样式类