# DropdownList 下拉菜单

概述

DropdownList 下拉菜单,用于弹出一个菜单给用户选择操作,居中弹出。

# 引入

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

# 代码演示

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

通过 options 属性设置下拉菜单数据。

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

<fui-dropdown-list options="{{options}}" id="ddlAssets" bindclick="assetsItemClick" bindclose="assetsClose"></fui-dropdown-list>
1
let ddlAssets;
Page({
  data: {
    options: [{
      text: '机架式服务器',
      value: 1
    }, {
      text: '笔记本',
      value: 2
    }, {
      text: '平板电脑',
      value: 3
    }, {
      text: '台式机+显示器',
      value: 3
    }],
    assets: '',
    assetsShow: false
  },
  onReady: function () {
    ddlAssets = this.selectComponent("#ddlAssets")
  },
  assetsTap() {
    ddlAssets && ddlAssets.show()
    this.setData({
      assetsShow: true
    })
  },
  assetsItemClick(e) {
    console.log(e.detail)
    this.setData({
      assets: e.detail.text
    })
    this.assetsClose()
  },
  assetsClose() {
    this.setData({
      assetsShow: 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
40
41
固定高度、宽度 / 可滚动

通过 height 属性设置下拉菜单高度,width 属性设置下拉菜单宽度,checkboxColor 属性设置选择框选中后颜色,options 属性设置下拉菜单数据。

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

<fui-dropdown-list height="{{600}}" width="{{480}}" checkboxColor="#FFB703" options="{{options}}" id="ddlQues" bindclick="quesItemClick" bindclose="quesClose"></fui-dropdown-list>
1
let ddlQues;
Page({
  data: {
    options: ['注册激活', '站长工具', '投递文章', '媒体合作', '素材相关', '报告错误', '论坛事务', '发布软件', '网站排行榜', '其他事务'],
    question: '',
    quesShow: false
  },
  onReady: function () {
    ddlQues = this.selectComponent("#ddlQues")
  },
  quesTap() {
    ddlQues && ddlQues.show()
    this.setData({
      quesShow: true
    })
  },
  quesItemClick(e) {
    console.log(e.detail)
    this.setData({
      question: e.detail.text
    })
    this.quesClose()
  },
  quesClose() {
    this.setData({
      quesShow: 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

# Slots

插槽名称 说明
default V2.4.0+ 自定义item项(下拉菜单)内容

# Props

属性名 类型 说明 默认值 其他说明
options Array 下拉菜单数据,格式见下方说明 [ ] -
textKey V2.4.0+ String options数据中 text 值指定的key text -
srcKey V2.4.0+ String options数据中 src 值指定的key src -
checkedKey V2.4.0+ String options数据中 checked 值指定的key checked -
height Number, String 下拉菜单高度,单位rpx。大于0时生效 0 -
width Number, String 下拉菜单宽度,单位rpx。大于0时生效 0 -
background String 下拉菜单背景颜色 #fff -
radius Number, String 下拉菜单圆角值,部分平台若无效果则忽略该属性 0 -
padding Array 下拉菜单item项padding值。 32rpx -
isCheckbox Boolean 是否显示选择框 true -
checkboxColor String 选择框选中后颜色 #465CFF 若值为空,可通过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 下拉菜单字体选中后颜色 - -
maskClosable Boolean 点击下拉菜单遮罩是否可关闭下拉菜单 true -
maskBackground String 下拉菜单遮罩背景色 rgba(0, 0, 0, 0.6) -
zIndex Number 下拉菜单层级z-index值 1001 -
//options 数据格式说明

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

//数据格式二,以下为约定属性,其他属性可自行增加
options: [{
	//下拉菜单item项显示文本,可使用 textKey 属性指定key,必选
	text: '综合推荐',
	//下拉菜单item项文本对应value值,key可自定义任意值,可选
	value: 1,
	//下拉菜单item项icon图片地址,可使用 srcKey 属性指定key,可选
	src:'',
	//是否选中,可使用 checkedKey 属性指定key,可选
	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.data.options[index]
}
bind:close 点击遮罩层时触发 -

# Methods

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

示例预览

Last Updated: 6/10/2024, 1:36:35 PM