picker-view

About 29 min

picker-view

嵌入页面的滑动选择器。

子组件

不支持。

属性

除支持通用属性外,还支持如下属性:

名称

类型

默认值

必填

描述

type

string

text

设置滑动选择器的类型,该属性不支持动态修改,可选项有:

  • text:文本选择器。
  • time:时间选择器。
  • date:日期选择器。
  • datetime:日期时间选择器。
  • multi-text:多列文本选择器。

文本选择器:type=text

名称

类型

默认值

必填

描述

range

Array

-

设置文本选择器的取值范围。

说明:

使用时需要使用数据绑定的方式,如range = ,js中声明相应变量:data:["15", "20", "25"]。

selected

string

0

设置文本选择器的默认选择值,该值需要为range的索引。

indicatorprefix

string

-

文本选择器选定值增加的前缀字段。

indicatorsuffix

string

-

文本选择器选定值增加的后缀字段。

时间选择器:type=time

名称

类型

默认值

必填

描述

containsecond

boolean

false

时间选择器是否包含秒。

selected

string

当前时间

设置时间选择器的默认取值,格式为 HH:mm;

当包含秒时,格式为HH:mm:ss。

hours

number

241-4

-5+

设置时间选择器采用的时间格式,可选值:

  • 12:按照12小时制显示,用上午和下午进行区分;
  • 24:按照24小时制显示。
    说明:

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

日期选择器:type=date

名称

类型

默认值

必填

描述

start

<time>

1970-1-1

设置日期选择器的起始时间,格式为 YYYY-MM-DD。

end

<time>

2100-12-31

设置日期选择器的结束时间,格式为 YYYY-MM-DD。

selected

string

当前日期

设置日期选择器的默认选择值,格式为 YYYY-MM-DD。

lunar5+

boolean

false

设置日期选择器弹窗界面是否为农历展示。

lunarswitch

boolean

false

设置日期选择器是否显示农历开关,显示农历开关时,可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时,开关状态为开,当设置不显示农历时,开关状态为关。手机生效。

说明:

仅手机和平板设备支持。

日期时间选择器:type=datetime,日期的选择范围为本年的日月。

名称

类型

默认值

必填

描述

selected

string

当前日期时间

设置日期时间选择器的默认取值,格式有两种,为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm,不设置年时,默认使用当前年,该取值表示选择器弹窗时弹窗界面的默认选择值。

hours

number

241-4

-5+

设置日期时间选择器采用的时间格式,可选值:

  • 12:按照12小时制显示,用上午和下午进行区分;
  • 24:按照24小时制显示。
    说明:

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

lunar5+

boolean

false

设置日期时间选择器弹窗界面是否为农历展示。

lunarswitch

boolean

false

设置日期时间选择器是否显示农历开关,显示农历开关时,可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时,开关状态为开,当设置不显示农历时,开关状态为关。手机生效。

说明:

仅手机和平板设备支持。

多列文本选择器:type=multi-text

名称

类型

默认值

必填

描述

columns

number

-

设置多列文本选择器的列数。

range

二维Array

-

设置多列文本选择器的选择值,该值为二维数组。长度表示多少列,数组的每项表示每列的数据,如 [["a","b"], ["c","d"]]。

说明:

使用时需要使用数据绑定的方式,如range = ,js中声明相应变量:data:[["a","b"], ["c","d"]]。

selected

Array

[0,0,0,…]

设置多列文本选择器的默认值,每一列被选中项对应的索引构成的数组,该取值表示选择器弹窗时弹窗界面的默认选择值。

样式

除支持通用样式外,还支持如下样式:

名称

类型

默认值

必填

描述

color

<color>

#ffffff

候选项字体颜色。

font-size

<length>

16px

候选项字体尺寸,类型length,单位px。

selected-color

<color>

#ff0a69f7

选中项字体颜色。

selected-font-size

<length>

20px

选中项字体尺寸,类型length,单位px。

disappear-color5+

<color>

#ffffff

渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。

说明:

仅手机和平板设备支持。

disappear-font-size5+

<length>

14px

渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。

说明:

仅手机和平板设备支持。

font-family

string

sans-serif

选项字体类型。字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。

事件

仅支持如下事件:

type=text:

名称

参数

描述

change

{ newValue: newValue, newSelected: newSelected }

文本选择器选定值后触发该事件。

type=time:

名称

参数

描述

change

{ hour: hour, minute: minute, [second:second] }

时间选择器选定值后触发该事件。

包含秒时,返回时分秒。

type=date:

名称

参数

描述

change

{ year:year, month:month, day:day }

日期选择器选择值后触发该事件。

type=datetime:

名称

参数

描述

change

{ year:year, month:month, day:day, hour:hour, minute:minute }

日期时间选择器选择值后触发该事件。

type=multi-text:

名称

参数

描述

columnchange

{ column:column, newValue:newValue, newSelected:newSelected }

多列文本选择器某一列的值改变时触发该事件,column:第几列修改,newValue:选中的值,newSelected:选中值对应的索引。

方法

不支持。

示例

<!-- xxx.hml -->
<div class="container" @swipe="handleSwipe">
  <text class="title">
    Selected:{{time}}
  </text>
  <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
1
2
3
4
5
6
7
/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 454px;
  height: 454px;
}
.title {
  font-size: 30px;
  text-align: center;
}
.time-picker {
  width: 500px;
  height: 400px;
  margin-top: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* xxx.js */
export default {
  data: {
    defaultTime: "",
    time: "",
  },
  onInit() {
    this.defaultTime = this.now();
  },
  handleChange(data) {
    this.time = this.concat(data.hour, data.minute);
  },
  now() {
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    return this.concat(hours, minutes);
  },

  fill(value) {
    return (value > 9 ? "" : "0") + value;
  },

  concat(hours, minutes) {
    return `${this.fill(hours)}:${this.fill(minutes)}`;
  },
}
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