DropdownList 下拉菜单

概述

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

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "下拉菜单",
  "usingComponents": {
    "fui-dropdown-list": "/components/firstui/fui-dropdown-list/fui-dropdown-list"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-dropdown-list": "components/firstui/fui-dropdown-list/fui-dropdown-list"
  }

代码演示

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

基础使用

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

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

<fui-dropdown-list options="{{options}}" id="ddlAssets" bindclick="assetsItemClick" bindclose="assetsClose"></fui-dropdown-list>

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
    })
  }
})

固定高度、宽度 / 可滚动

通过 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>

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
    })
  }
})

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	其他说明
options	Array	下拉菜单数据，格式见下方说明	[ ]	-
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项显示文本，必选
	text: '综合推荐',
	//下拉菜单item项文本对应value值，可选
	value: 1,
	//下拉菜单item项icon图片地址，可选
	src:'',
	//是否选中，可选
	checked: false
}]

Events

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

Methods

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

方法名	说明	传入参数
show	显示下拉菜单	-

示例预览