有赞下拉菜单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

e21389f3c099b6fe538226d20f97726a.gif

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
程序员的必经之路! 【限时优惠】 现在下单,还享四重好礼: 1、教学课件免费下载 2、课程案例代码免费下载 3、专属VIP学员群免费答疑 4、下单还送800元编程大礼包 【超实用课程内容】  根据2019-2020年中国开发者调查报告显示,超83%的开发者都在使用MySQL数据。使用量大同时,掌握MySQL早已是运维、DBA的必备技能,甚至部分IT开发岗位也要求对数据使用和原理有深入的了解和掌握。 学习编程,你可能会犹豫选择 C++ 还是 Java;入门数据科学,你可能会纠结于选择 Python 还是 R;但无论如何, MySQL 都是 IT 从业人员不可或缺的技能!   套餐中一共包含2门MySQL数据必学的核心课程(共98课时)   课程1:MySQL数据从入门到实战应用   课程2:高性能MySQL实战课   【哪些人适合学习这门课程?】  1)平时只接触了语言基础,并未学习任何数据知识的人;  2)对MySQL掌握程度薄弱的人,课程可以让你更好发挥MySQL最佳性能; 3)想修炼更好的MySQL内功,工作中遇到高并发场景可以游刃有余; 4)被面试官打破沙锅问到底的问题问到怀疑人生的应聘者。 【课程主要讲哪些内容?】 课程一:MySQL数据从入门到实战应用 主要从基础篇,SQL语言篇、MySQL进阶篇三个角度展开讲解,帮助大家更加高效的管理MySQL数据。 课程二:高性能MySQL实战课主要从高可用篇、MySQL8.0新特性篇,性能优化篇,面试篇四个角度展开讲解,帮助大家发挥MySQL的最佳性能的优化方法,掌握如何处理海量业务数据和高并发请求 【你能收获到什么?】  1.基础再提高,针对MySQL核心知识点学透,用对; 2.能力再提高,日常工作中的代码换新貌,不怕问题; 3.面试再加分,巴不得面试官打破沙锅问到底,竞争力MAX。 【课程如何观看?】  1、登录CSDN学院 APP 在我的课程中进行学习; 2、移动端:CSDN 学院APP(注意不是CSDN APP哦)  本课程为录播课,课程永久有效观看时长 【资料开放】 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化。  下载方式:电脑登录课程观看页面,点击右侧课件,可进行课程资料的打包下载。
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值