FirstUI 微信小程序版

# DropdownMenu 下拉菜单

概述

DropdownMenu 下拉菜单，用于弹出一个下拉菜单给用户选择操作。

# 引入

以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
  "navigationBarTitleText": "下拉菜单",
  "usingComponents": {
    "fui-dropdown-menu":"/components/firstui/fui-dropdown-menu/fui-dropdown-menu"
  }
}
1
2
3
4
5
6
第二种：在根目录app.json文件中全局引入
"usingComponents": {
   "fui-dropdown-menu":"components/firstui/fui-dropdown-menu/fui-dropdown-menu"
}
1
2
3

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。
基础使用

通过 size 属性设置下拉菜单字体大小，selectedColor 属性设置下拉菜单字体选中后颜色，options 属性设置下拉菜单数据。

通过 this.selectComponent 获取子组件的实例对象（调用时需要传入一个匹配选择器 selector），然后调用上面的实例方法。

注意：页面上用于点击显示下拉菜单的布局内容放置于组件内部。如下所示：
 <fui-dropdown-menu size="{{28}}" selectedColor="#465CFF" options="{{options}}" bindclick="rangeItemClick" bindclose="rangeClose" id="ddmRange">
	  <view class="fui-filter__item" bindtap="filterTap">
		<text>{{range}}</text>
		<view class="fui-filter__icon {{rangeShow?'fui-icon__ani':''}}">
		  <fui-icon name="turningdown" size="32"></fui-icon>
		</view>
	  </view>
</fui-dropdown-menu>
1
2
3
4
5
6
7
8
let ddmRange
Page({
	data: {
		options: [{
			text: '综合推荐',
			value: 1,
			checked: true
		}, {
			text: '新品优先',
			value: 2
		}, {
			text: '评论数从高到低',
			value: 3
		}],
		range: '综合推荐',
		rangeShow: false
	},
   onReady() {
     ddmRange = this.selectComponent("#ddmRange");
   },
   filterTap() {
		ddmRange && ddmRange.show()
		this.setData({
		  rangeShow: true
		})
	},
	rangeItemClick(e) {
		console.log(e.detail)
		this.setData({
		  range: e.detail.text
		})
		this.rangeClose()
	},
	rangeClose() {
		this.setData({
		  rangeShow: false
		})
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.fui-filter__item {
	width: 300rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	background-color: #fff;
}

.fui-filter__icon {
	transition: all .15s linear;
}

.fui-icon__ani {
	transform: rotate(180deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
向上展开、不显示选择框

通过 isCheckbox 属性控制是否显示选择框，selectedColor 属性设置下拉菜单字体选中后颜色，splitLine 属性设置每项间是否显示分割线，options 属性设置下拉菜单数据，direction 属性设置下拉菜单展开方向。

<fui-list-cell highlight="{{false}}">
      <view class="fui-list__cell fui-flex__center">
        <text>选择标签：</text>
        <view class="fui-flex__1">
          <fui-dropdown-menu isCheckbox="{{false}}" selectedColor="#FF2B2B" splitLine options="{{options3}}" id="ddmTag" direction="up" bindclick="tagItemClick" bindclose="tagClose">
            <view class="fui-select fui-flex__between" bindtap="tagTap">
              <input placeholder="请选择" value="{{tag}}" class="fui-input" disabled />
              <view class="fui-filter__icon {{tagShow?'fui-icon__ani':''}}">
                <fui-icon name="turningdown" size="32"></fui-icon>
              </view>
            </view>
          </fui-dropdown-menu>
        </view>
      </view>
</fui-list-cell>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let ddmTag
Page({
	data: {
		options: ['最新车讯', '降价排行', 'SUV', '违章罚单', '提车试驾', '测评体验', '选车指南', '美女车模', '加油优惠卡', '维修保养'],
		tag: '请选择',
		tagShow: false
	},
	onReady() {
	  ddmTag = this.selectComponent("#ddmTag");
	}
	tagTap() {
	    ddmTag && ddmTag.show()
		this.setData({
		  tagShow: true
		})
	},
	tagItemClick(e) {
		console.log(e.detail)
		this.setData({
		  tag: e.detail.text
		})
		this.tagClose()
	},
	tagClose() {
		this.setData({
		  tagShow: false
		})
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.fui-filter__icon {
	transition: all .15s linear;
}

.fui-icon__ani {
	transform: rotate(180deg);
}

.fui-list__cell {
	width: 100%;
}

.fui-select {
	flex: 1;
	height: 80rpx;
	padding: 32rpx;
	box-sizing: border-box;
	position: relative;
}

.fui-select::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 200%;
	height: 200%;
	border: 1px solid #eee;
	transform: scale(.5);
	transform-origin: 0 0;
	pointer-events: none;
}
.fui-flex__center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fui-flex__between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# Slots

插槽名称 说明
default 点击显示下拉菜单的布局内容

# Props

属性名 类型 说明 默认值 其他说明
options Array 下拉菜单数据，格式见下方说明 [ ] -
maxHeight Number, String 下拉菜单最大高度，单位rpx 400 -
minWidth Number, String 下拉菜单最小宽度，单位rpx 0 -
left Number, String 下拉菜单left值，单位rpx 0 -
right Number, String 下拉菜单right值，单位rpx。right大于等于0时生效，且left失效 -1 -
background String 下拉菜单背景颜色 #fff -
radius Number, String 下拉菜单圆角值，部分平台若无效果则忽略该属性 0 -
padding String 下拉菜单item项padding值 32rpx -
isCheckbox Boolean 是否显示选择框 true -
checkboxColor String 选择框选中后颜色 - 若值为空，可通过css变量 ( --fui-color-primary ) 修改颜色值
borderColor String 选择框未选中时边框颜色 #ccc -
isCheckMark Boolean 选择框是否只显示对号，无边框背景 false -
checkmarkColor String 选择框对号颜色 #fff -
isReverse Boolean 选择框与内容是否颠倒排列 false -
splitLine Boolean 下拉菜单每项间是否需要分割线 false -
iconWidth Number, String 下拉菜单icon宽度，单位rpx。高度与宽度等长 48 -
size Number, String 下拉菜单字体大小，单位rpx 32 -
color String 下拉菜单字体颜色 #181818 -
selectedColor String 下拉菜单字体选中后颜色 - -
isMask Boolean 是否需要遮罩层 true -
maskBackground String 遮罩层背景色 transparent -
direction String 下拉菜单展开方向，可选值：down、up down -
//options 数据格式说明

//数据格式一，字符串数组
options: ['最新车讯', '降价排行', 'SUV', '违章罚单', '提车试驾', '测评体验', '选车指南', '美女车模', '加油优惠卡', '维修保养']

//数据格式二，以下为约定属性，其他属性可自行增加
options: [{
	//下拉菜单item项显示文本，必选
	text: '综合推荐',
	//下拉菜单item项文本对应value值，可选
	value: 1,
	//下拉菜单item项icon图片地址，可选
	src:'',
	//是否选中，可选
	checked: false
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Events

事件名 说明 回调参数
bind:click 点击下拉菜单item项时触发 event.detail =
{
  index:item项索引,
  ...this.options[index]
}
bind:close 点击遮罩层时触发 -

# Methods

通过 `this.selectComponent` 获取子组件的实例对象（调用时需要传入一个匹配选择器 selector），然后调用上面的实例方法。
方法名 说明 传入参数
show 显示下拉菜单 -

示例预览

Last Updated: 1/23/2024, 3:30:05 PM

← DropdownList 下拉菜单 →