DropdownMenu 下拉菜单的使用

官方例子：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].textthis.setData({menuText: selValue})},
})

DropdownMenu 下拉菜单的使用相关推荐

vant 下拉框样式_Vant DropdownMenu 下拉菜单
Vant DropdownMenu 下拉菜单 Vant DropdownMenu 下拉菜单主要用于一些分类栏目较多的地方进行制作下拉菜单. 引入import Vue from 'vue'; impor ...
微信小程序中 Vant DropdownMenu 下拉菜单组件滑动穿透问题
首先开发者在wxml页面中定义如下代码: page-meta 必须是页面内的第一个节点 <page-meta page-style="{{ showDropdownMenu ? 'ov ...
Vant中DropdownMenu 下拉菜单样式自定义修改
注意添加/deep/ .right /deep/ .van-dropdown-menu.van-dropdown-menu__bar {box-shadow: unset !important;bac ...
android的dropdownmenu,Bootstrap 下拉菜单.dropdown的具体使用方法
本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 下拉菜单.dropdown具体用法 .dropdown ...
html5 移动端下拉菜单,react实现移动端下拉菜单的示例代码
前言项目中要实现类似与vant的DropdownMenu:下拉菜单.看了vans 的效果其实也没什么难度,于是动手鲁了一个这样的组件. 项目的技术栈为react全家桶+material UI + ...
Bootstrap使用 .dropdown-menu 类创建下拉菜单
下拉菜单下拉菜单是一种非常常见的效果,用于展示可切换.有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序. Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航.按钮等 ...
Jetpack Compose——DropdownMenu（下拉菜单）的简单使用
基于compose_version=1.1.0-beta01版本参数如下: DropdownMenu(expanded: Boolean,//菜单栏状态onDismissRequest: () -& ...
bootstrap:按钮，下拉菜单
'btn':加按钮样式 btn-small btn-large:调整按钮大小 btn-primary....:调整按钮风格 btn-group:声明这是一个按钮组 <span class='ca ...
Bootstrap下拉菜单组件
组件的功能是帮助我们的网页实现一些功能,我们可以引用的是Bootstrap中的下拉菜单.我们来看看下拉组件中常用到的一些的功能: 下拉菜单的实现: <div class="dropdo ...
Bootstrap系列 -- 28. 下拉菜单状态
下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...

DropdownMenu 下拉菜单的使用

DropdownMenu 下拉菜单的使用相关推荐

最新文章

热门文章