界面组件 UI Components

下拉菜单 Dropdown

下拉菜单向用户呈现一组操作选项。当一个界面无法容纳所有选项，或者选项常用性不高时使用下拉菜单形式。 下拉菜单 (Dropdown) 仅用于 “···” (更多) 图标的情况上，且比起动作表 (Action Sheet) 来说下拉菜单 (Dropdown) 更加轻量，对用户操作打断较小，适用于希望用户快速进行下一步操作的情况。

适用情况

  • 下拉菜单选项不应超过 6 项。
  • 每个选项内容简短。

不适用情况

  • 下拉菜单内出现图标等视觉元素。
  • 菜单选项中出现多行文字的情况。
  • 下拉菜单边框超出屏幕尺寸。

用户与界面元素互动后触发下拉菜单。根据触发元素的位置，下拉菜单可出现在其上或其下。 下拉菜单中选项应不超过 6 个；下拉菜单仅使用纯文字，避免使用图标。

  • React Native
  • Vue.js
  • import {Dropdown} from 'up-qp-dls';

...

constructor(props) {
	super(props);
	this.items = [
	'更改类别',
	'添加评论',
	'删除该交易',
	'联系我们',];
	Object.assign(this.state, {
		selectedIndex: null,
	});
}

show(view) {
	view.measure((x, y, width, height, pageX, pageY) => {
	Dropdown.show(
			{x: pageX, y: pageY, width, height},
			this.items,
			this.state.selectedIndex,
			(item, index) => this.setState({selectedIndex: index})
		);
	});
}

renderPage() {
	let {selectedIndex} = this.state;
	let selected = (selectedIndex || selectedIndex === 0) ? this.items[selectedIndex] : this.items[0];

	return (
		<ScrollView style={{flex:1, paddingHorizontal:Theme.spaceM,paddingTop:Theme.spaceM}}>
		<ListSection type='singleRow'>
		<ListRow title='触发下拉菜单' detail={selected} ref='defaultRow' onPress={() => this.show(this.refs['defaultRow'])} />
		</ListSection>

		<Button title={selected} type='primary' ref='primaryButton' onPress={() => this.show(this.refs['primaryButton'])} />

		<View style={{height: Theme.screenInset.bottom}} />
		</ScrollView>
	);
}
  
...


  • <up-dropdown v-model="drop" width="100%" :items="items" @onSelected="onSelected">
	<div class="box></div>
</up-dropdown>

<script>

export default {
  data () {
    return {
      items:['更改类别','添加评论','删除该交易','联络我们'],
      drop:true,
    }
  },
  methods:{
    onSelected:function(ev){
      console.log(ev)
    },
  }
}
</script>
  • 展开
    收起

应用场景

  • 下拉菜单 (Dropdown) 仅用于 “···” (更多) 图标的情况上，且比起动作表 (Action Sheet) 来说下拉菜单 (Dropdown) 更加轻量，对用户操作打断较小，适用于希望用户快速进行下一步操作的情况。 动作表适用性更广，但也对用户下一步操作打断更大，使用时候应根据实际情况选择动作表 (Action Sheet) 或是下拉菜单 (Dropdown) 。

Vue.js Reference

属性 说明 类型 可选值 默认值
v-model 显示状态，双向数据绑定 Boolean - false
width 菜单宽度，可以写固定数值(数字或百分比，需带单位)或自适应(auto) String - auto
items 菜单项配置 Array - -
position 菜单整体位置 String left,center,right right
事件 说明 参数
onSelected 选择菜单选项时触发 index: Number

React Native Reference

Dropdown.show() 函数的参数说明

参数 说明 类型 可选值 默认值
fromBounds 下拉菜单展开的起始位置 JSON配置参数 {x: 0, y: 0, width:114, height:48} - -
items 菜单项文字 string 数组 - -
selectedIndex 默认选中的菜单项索引值 integer - -1
onSelected 选中时触发的回调函数 - func -