鸿蒙5.0版开发：UI框架JS组件-基础组件（picker）

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

picker

   说明： 从API version 4开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  滑动选择器组件，类型支持平凡选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
权限列表

无
子组件

不支持。
属性

除支持通用属性外，还支持如下属性：
名称类型默认值必填描述typestring-否该属性值不支持动态修改。可选择项有：
- text：文本选择器。
- date：日期选择器。
- time：时间选择器。
- datetime：日期时间选择器。
- multi-text：多列文本选择器。 平凡选择器

滑动选择器类型设置为text时表现平凡选择器。
名称类型默认值必填描述rangeArray-否设置平凡选择器的取值范围，如[“15”, “20”, “25”]。
使用时必要使用数据绑定的方式range ={{data}}，js中声明相应变量data：["15","20","25"]。selectedstring0否设置平凡选择器弹窗的默认取值，取值必要是 range 的索引值，该取值表现选择器弹窗界面的默认选择值。valuestring-否设置平凡选择器的值。 日期选择器

滑动选择器类型设置为date时表现日期选择器。
名称类型默认值必填描述start<time>1970-1-1否设置日期选择器的起始时间，格式为 YYYY-MM-DD。end<time>2100-12-31否设置日期选择器的竣事时间，格式为 YYYY-MM-DD。selectedstring当前日期否设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表现选择器弹窗界面的默认选择值。valuestring-是设置日期选择器的值。lunar5+booleanfalse否设置日期选择器弹窗界面是否为农历展示。lunarswitchbooleanfalse否设置日期选择器是否表现农历开关。当值为true时，表现农历开关，点击农历开关可切换公历和农历。当值为false时，不表现农历开关。
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 时间选择器

滑动选择器类型设置为time时表现时间选择器。
名称类型默认值必填描述containsecondbooleanfalse否设置时间选择器是否包含秒。selectedstring当前时间否设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，
该取值表现选择器弹窗界面的默认选择值。valuestring-否设置时间选择器的值。hoursnumber241-4
-5+否设置时间选择器接纳的时间格式，可选值：
- 12：按照12小时制表现，用上午和下战书举行区分；
- 24：按照24小时制表现。
从API Version 5开始，默认值会依据系统当前所选地域和语言选择本地风俗的小时制(12小时制或24小时制)。 日期时间选择器

滑动选择器类型设置为datetime时表现日期时间选择器，日期的选择范围为本年的日月。
名称类型默认值必填描述selectedstring当前日期时间否设置日期时间选择器弹窗的默认取值，有两种可选格式。
- 月日时分：MM-DD-HH-mm
- 年月日时分：YYYY-MM-DD-HH-mm
不设置年时，默认使用当前年，该取值表现选择器弹窗界面的默认选择值。valuestring-是设置日期时间选择器的值。hoursnumber241-4
-5+否设置日期时间选择器接纳的时间格式，可选值：
- 12：按照12小时制表现，用上午和下战书举行区分；
- 24：按照24小时制表现。
从API Version 5开始，默认值会依据系统当前所选地域和语言选择本地风俗的小时制(12小时制或24小时制)。lunar5+booleanfalse否设置日期时间选择器弹窗界面是否为农历展示。lunarswitchbooleanfalse否设置日期选择器是否表现农历开关。当值为true时，表现农历开关，点击农历开关可切换公历和农历。当值为false时，不表现农历开关。
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 多列文本选择器

滑动选择器类型设置为multi-text时表现多列文本选择器。
名称类型默认值必填描述columnsnumber-是设置多列文本选择器的列数。range二维Array-否设置多列文本选择器的选择项，此中range 为二维数组。长度表现多少列，数组的每项表现每列的数据，如  [[“a”,“b”], [“c”,“d”]]。
使用时必要使用数据绑定的方式range ={{data}}，js中声明相应变量data：["15","20","25"]。selectedArray[0,0,0,…]否设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表现选择器弹窗界面的默认选择值。valueArray-否设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 样式

除支持通用样式外，还支持如下样式：
名称类型默认值必填描述text-color<color>-否选择器的文本颜色。font-size<length>-否选择器的文本尺寸。allow-scalebooleantrue否选择器的文本尺寸是否跟随系统设置字体缩放尺寸举行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接见效。letter-spacing<length>0否选择器的字符间距。text-decorationstring-否选择器的文本修饰。font-stylestringnormal否选择器的字体样式。font-weightnumber | stringnormal否选择器的字体粗细。font-familystringsans-serif否选择器的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自界说字体指定的字体，会被选中作为文本的字体。line-height<length>0px否选择器的文本行高。column-height5+<length>-否选择器的选择项列表高度。 事件

除支持通用事件外，还支持如下事件：
平凡选择器

名称参数描述change{ newValue: newValue, newSelected: newSelected }平凡选择器选择值后点击弹窗中简直定按钮时触发该事件（newSelected为索引）。cancel-用户点击弹窗中的取消按钮时触发该事件。 日期选择器

名称参数描述change{ year: year, month: month, day: day }日期选择器选择值后点击弹窗中简直认按钮时触发该事件。
从API Version 5开始，month值范围为： 0（1月）~11（12月）。cancel-用户点击弹窗中的取消按钮时触发该事件。 日期时间选择器

名称参数描述change{ year: year, month: month, day: day,  hour: hour, minute: minute}日期时间选择器选择值后点击弹窗中简直认按钮时触发该事件。cancel-用户点击弹窗中的取消按钮时触发该事件。 时间选择器

名称参数描述change{ hour: hour, minute: minute, [second: second] }时间选择器选择值后点击弹窗中简直认按钮时触发该事件，当使用时分秒时，还包含秒数据。cancel-用户点击弹窗中的取消按钮时触发该事件。 多列文本选择器

名称参数描述change{ newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }多列文本选择器选择值后点击弹窗中简直认按钮时触发该事件，此中：
- newValue：被选中项对应的值构成的数组。
- newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度同等。columnchange{ column: column, newValue: newValue, newSelected: newSelected }多列文本选择器中某一列的值改变时触发该事件，此中：
- column：第几列修改。
- newValue：选中的值。
- newSelected：选中值对应的索引。cancel-用户点击弹窗中的取消按钮时触发该事件。 方法

除支持通用方法外，支持如下方法：
名称参数描述show-表现 picker。 示例

1. <!-- xxx.hml -->
2. <div class="container">
3.     <select @change="selectChange">
4.         <option value="{{ item }}" for="item in selectList">
5.             {{ item }}
6.         </option>
7.     </select>
8.     <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
9.             onchange="textonchange"
10.             oncancel="textoncancel" class="pickertext" show="false"></picker>
12.     <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
13.             lunarswitch="true"
14.             onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
16.     <picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
17.             selected="{{ timeselect }}" hours="12"
18.             onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
20.     <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
21.             lunarswitch="true"
22.             onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
24.     <picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
25.             selected="{{ multitextselect }}"
26.             onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
27. </div>

复制代码

1. /* xxx.css */
2. .container {
3.     flex-direction: column;
4.     justify-content: center;
5.     align-items: center;
6. }
8. picker {
9.     width: 60%;
10.     height: 80px;
11.     border-radius: 20px;
12.     text-color: white;
13.     font-size: 15px;
14.     background-color: #4747e3;
15.     margin-left: 20%;
16. }
18. select {
19.     background-color: #efecec;
20.     height: 50px;
21.     width: 60%;
22.     margin-left: 20%;
23.     margin-top: 300px;
24.     margin-bottom: 50px;
25.     font-size: 22px;
26. }

复制代码

1. // xxx.js
2. import promptAction from '@ohos.promptAction';
4. export default {
5.     data: {
6.         selectList: ["text", "data", "time", "datetime", "multitext"],
7.         rangetext: ['15', "20", "25"],
8.         multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
9.         textvalue: 'default textvalue',
10.         datevalue: 'default datevalue',
11.         timevalue: 'default timevalue',
12.         datetimevalue: 'default datetimevalue',
13.         multitextvalue: 'default multitextvalue',
14.         containsecond: true,
15.         multitextselect: [1, 2, 0],
16.         datetimeselect: '2012-5-6-11-25',
17.         timeselect: '11:22:30',
18.         dateselect: '2021-3-2',
19.         textselect: '2'
20.     },
21.     selectChange(e) {
22.         for (let i = 0;i < this.selectList.length; i++) {
23.             if (e.newValue == this.selectList[i]) {
24.                 this.$element("picker" + i).show();
25.             }
26.         }
27.     },
28.     textonchange(e) {
29.         this.textvalue = e.newValue;
30.         promptAction.showToast({
31.             message: "text:" + e.newValue + ",newSelected:" + e.newSelected
32.         })
33.     },
34.     textoncancel(e) {
35.         promptAction.showToast({
36.             message: "text: textoncancel"
37.         })
38.     },
39.     dateonchange(e) {
40.         this.datevalue = e.year + "-" + e.month + "-" + e.day;
41.         promptAction.showToast({
42.             message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
43.         })
44.     },
45.     dateoncancel() {
46.         promptAction.showToast({
47.             message: "date: dateoncancel"
48.         })
49.     },
50.     timeonchange(e) {
51.         if (this.containsecond) {
52.             this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
53.             promptAction.showToast({
54.                 message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
55.             })
56.         } else {
57.             this.timevalue = e.hour + ":" + e.minute;
58.             promptAction.showToast({
59.                 message: "Time:" + e.hour + ":" + e.minute
60.             })
61.         }
62.     },
63.     timeoncancel() {
64.         promptAction.showToast({
65.             message: "timeoncancel"
66.         })
67.     },
68.     datetimeonchange(e) {
69.         this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
70.         promptAction.showToast({
71.             message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
72.         })
73.     },
74.     datetimeoncancel() {
75.         promptAction.showToast({
76.             message: "datetimeoncancel"
77.         })
78.     },
79.     multitextonchange(e) {
80.         this.multitextvalue = e.newValue;
81.         promptAction.showToast({
82.             message: "Multi-column text change" + e.newValue
83.         })
84.     },
85.     multitextoncancel() {
86.         promptAction.showToast({
87.             message: "multitextoncancel"
88.         })
89.     },
90.     popup_picker() {
91.         this.$element("picker_text").show();
92.     },
93. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。