有赞下拉菜单html,反馈组件 - DropdownMenu 下拉菜单 - 《Vant Weapp 1.0.3 小程序UI组件库》 - 书栈网 · BookStack...

DropdownMenu 下拉菜单

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手"usingComponents":{

"van-dropdown-menu":"path/to/@vant/weapp/dist/dropdown-menu/index",

"van-dropdown-item":"path/to/@vant/weapp/dist/dropdown-item/index"

}

代码演示

基础用法

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'

}

});

自定义菜单内容

slot="right-icon"

size="24px"

style="height:26px"

checked="{{ switch1 }}"

bind:change="onSwitch1Change"

/>

slot="right-icon"

size="24px"

style="height:26px"

checked="{{ switch2 }}"

bind:change="onSwitch2Change"

/>

确定

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 });

}

});

自定义选中状态颜色

向上展开

禁用菜单

API

DropdownMenu PropsAttributeDescriptionTypeDefaultVersionactive-color菜单标题和选项的选中态颜色string#1989fa-

z-index菜单栏 z-index 层级number10-

duration动画时长，单位毫秒number200-

direction菜单展开方向，可选值为upstringdown-

overlay是否显示遮罩层booleantrue-

close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue-

close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue-

DropdownItem PropsAttributeDescriptionTypeDefaultVersionvalue当前选中项对应的 valuestring | number--

title菜单项标题stringText of selected option-

options选项数组Option[][]-

disabled是否禁用菜单booleanfalse-

title-class标题额外类名string--

DropdownItem EventsEventDescriptionArgumentschange点击选项导致 value 变化时触发value

close关闭菜单栏时触发-

DropdownItem Methods

通过 selectComponent(id) 可访问NameAttributeReturn valueDescriptiontoggleshow: boolean-切换菜单是否展示

Data Structure of OptionKeyDescriptionTypetext文字string

value标识符string | number

icon左侧图标名称或图片链接，可选值见 Icon 组件string