更新记录
1.0.8(2023-11-23)
*修复:异步加载数据时,默认下标为0时无法选中
1.0.7(2023-10-09)
*修复:异步加载数据时,默认下标下标为0时无法选中
1.0.6(2023-08-29)
新增-H5环境下点击列表外部区域,列表自动收起(小程序目前没有实现该功能)
优化-小程序环境下列表在页面加载时会闪动
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.4.17 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
um-dropdown
下拉菜单
说明
um-dropdown 是基于uni-app生态的一款下拉菜单组件,可自定义文本框样式,列表类容支持数组,数组内可使用object类型
使用方法
符合uni-app的插件模块化规范配置,直接引用即可。
<template>
<view style="width: 100px;height: 100px;">
<um-dropdown @change="fnChange" rangeKey="label" :optionList="listData" selectedItemStyle="color:2973F8;"></um-dropdown>
</view>
</template>
<script>
export default {
data() {
return {
optionVal: '', // 选中列表的值
listData: [ // 列表数据
{
label: '北京',
value: '1',
},
{
label: '上海',
value: '2',
},
{
label: '重庆',
value: '3',
},
{
label: '成都',
value: '4',
}
]
}
},
methods: {
// 列表选中时触发事件,带出选中的值
fnChange(e) {
this.optionVal = e
}
}
}
</script>
API
Props
属性名 |
说明 |
类型 |
optionList |
菜单列表数据 |
Array |
rangeKey |
如果数据中包含对象时,需要显示的key值 |
String |
listHeight |
列表高度,设置后列表可以滑动(默认展示所有数据) |
String |
defaultIndex |
默认选中的下标 |
String,Number |
width |
菜单宽度(默认继承父元素width) |
String |
height |
菜单高度(默认继承父元素height) |
String |
listStyle |
自定义列表样式 |
String,Object |
itemStyle |
自定义菜单样式 |
String,Object |
selectedItemStyle |
菜单选中时的样式 |
String,Object |
Events
属性名 |
说明 |
类型 |
change |
列表点击事件,值发生改变时触发 |
Handler |
click |
菜单点击事件 |
Handler |
openNull |
菜单点击事件,列表为空时触发 |
Handler |
平台差异
平台 |
说明 |
H5 |
点击组件外部区域列表会自动收起 |
微信小程序 |
点击组件外部区域,列表不会自动收起 |
其他 |
问题待测,持续更新中 |
交流反馈
留言信息无法实时查看,如需及时交流和反馈可加入QQ群:368365360