1# picker-view 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6嵌入页面的滑动选择器。 7 8 9## 子组件 10 11不支持。 12 13 14## 属性 15 16除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 17 18| 名称 | 类型 | 默认值 | 必填 | 描述 | 19| ---- | ------ | ---- | ---- | ---------------------------------------- | 20| type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：<br/>- text：文本选择器。<br/>- time：时间选择器。<br/>- date：日期选择器。<br/>- datetime：日期时间选择器。<br/>- multi-text：多列文本选择器。 | 21 22### 文本选择器 23 24| 名称 | 类型 | 默认值 | 必填 | 描述 | 25| --------------- | ------ | ---- | ---- | ---------------------------------------- | 26| range | Array | - | 否 | 设置文本选择器的取值范围。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | 27| selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 | 28| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 | 29| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 | 30 31### 时间选择器 32 33| 名称 | 类型 | 默认值 | 必填 | 描述 | 34| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | 35| containsecond | boolean | false | 否 | 时间选择器是否包含秒。 | 36| selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为 HH:mm；<br/>当包含秒时，格式为HH:mm:ss。 | 37| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>- 12：按照12小时制显示，用上午和下午进行区分；<br/>- 24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | 38 39### 日期选择器 40 41| 名称 | 类型 | 默认值 | 必填 | 描述 | 42| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- | 43| start | <time> | 1970-1-1 | 否 | 设置日期选择器的起始时间，格式为 YYYY-MM-DD。 | 44| end | <time> | 2100-12-31 | 否 | 设置日期选择器的结束时间，格式为 YYYY-MM-DD。 | 45| selected | string | 当前日期 | 否 | 设置日期选择器的默认选择值，格式为 YYYY-MM-DD。 | 46| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | 47| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | 48 49### 日期时间选择器 50 51| 名称 | 类型 | 默认值 | 必填 | 描述 | 52| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | 53| selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 | 54| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>- 12：按照12小时制显示，用上午和下午进行区分；<br/>- 24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 | 55| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | 56| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | 57 58### 多列文本选择器 59 60| 名称 | 类型 | 默认值 | 必填 | 描述 | 61| -------- | ------- | --------- | ---- | ---------------------------------------- | 62| columns | number | - | 是 | 设置多列文本选择器的列数。 | 63| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 | 64| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 | 65 66 67## 样式 68 69除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 70 71| 名称 | 类型 | 默认值 | 必填 | 描述 | 72| -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- | 73| color | <color> | \#ffffff | 否 | 候选项字体颜色。 | 74| font-size | <length> | 16px | 否 | 候选项字体尺寸，类型length，单位px。 | 75| selected-color | <color> | #ff0a69f7 | 否 | 选中项字体颜色。 | 76| selected-font-size | <length> | 20px | 否 | 选中项字体尺寸，类型length，单位px。 | 77| disappear-color<sup>5+</sup> | <color> | \#ffffff | 否 | 渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。 | 78| disappear-font-size<sup>5+</sup> | <length> | 14px | 否 | 渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。 | 79| font-family | string | sans-serif | 否 | 选项字体类型。字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 80 81 82## 事件 83 84仅支持如下事件： 85 86### 文本选择器 87 88| 名称 | 参数 | 描述 | 89| ------ | ---------------------------------------- | --------------- | 90| change | { newValue: newValue, newSelected: newSelected } | 文本选择器选定值后触发该事件。 | 91 92### 时间选择器 93 94| 名称 | 参数 | 描述 | 95| ------ | ---------------------------------------- | ------------------------------- | 96| change | { hour: hour, minute: minute, [second:second]} | 时间选择器选定值后触发该事件。<br/>包含秒时，返回时分秒。 | 97 98### 日期选择器 99 100| 名称 | 参数 | 描述 | 101| ------ | ---------------------------------------- | --------------- | 102| change | { year:year, month:month, day:day } | 日期选择器选择值后触发该事件。 | 103 104### 日期时间选择器 105 106| 名称 | 参数 | 描述 | 107| ------ | ---------------------------------------- | ----------------- | 108| change | { year:year, month:month, day:day, hour:hour, minute:minute } | 日期时间选择器选择值后触发该事件。 | 109 110### 多列文本选择器 111 112| 名称 | 参数 | 描述 | 113| ------------ | ---------------------------------------- | ---------------------------------------- | 114| columnchange | { column:column, newValue:newValue, newSelected:newSelected } | 多列文本选择器某一列的值改变时触发该事件，column：第几列修改，newValue：选中的值，newSelected：选中值对应的索引。 | 115 116 117## 方法 118 119不支持。 120 121 122## 示例 1231. 文本选择器 124 ```html 125 <!-- xxx.hml --> 126 <div class="container"> 127 <text class="title"> 128 选中值：{{value}} 选中下标： {{index}} 129 </text> 130 <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view> 131 </div> 132 ``` 133 134 ```css 135 /* xxx.css */ 136 .container { 137 flex-direction: column; 138 justify-content: center; 139 align-items: center; 140 left: 0px; 141 top: 0px; 142 width: 454px; 143 height: 454px; 144 } 145 .title { 146 font-size: 30px; 147 text-align: center; 148 margin-top: 20px; 149 } 150 ``` 151 152 ```js 153 /* xxx.js */ 154 export default { 155 data: { 156 options: ['选项1', '选项2', '选项3'], 157 value: "选项1", 158 index: 0 159 }, 160 handleChange(data) { 161 this.value = data.newValue; 162 this.index = data.newSelected; 163 }, 164 } 165 ``` 166  167 1682. 时间选择器 169 ```html 170 <!-- xxx.hml --> 171 <div class="container"> 172 <text class="title"> 173 Selected：{{time}} 174 </text> 175 <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> 176 </div> 177 ``` 178 179 ```css 180 /* xxx.css */ 181 .container { 182 flex-direction: column; 183 justify-content: center; 184 align-items: center; 185 left: 0px; 186 top: 0px; 187 width: 454px; 188 height: 454px; 189 } 190 .title { 191 font-size: 30px; 192 text-align: center; 193 } 194 .time-picker { 195 width: 500px; 196 height: 400px; 197 margin-top: 20px; 198 } 199 ``` 200 201 ```js 202 /* xxx.js */ 203 export default { 204 data: { 205 defaultTime: "", 206 time: "", 207 }, 208 onInit() { 209 this.defaultTime = this.now(); 210 }, 211 handleChange(data) { 212 this.time = this.concat(data.hour, data.minute); 213 }, 214 now() { 215 const date = new Date(); 216 const hours = date.getHours(); 217 const minutes = date.getMinutes(); 218 return this.concat(hours, minutes); 219 }, 220 fill(value) { 221 return (value > 9 ? "" : "0") + value; 222 }, 223 concat(hours, minutes) { 224 return `${this.fill(hours)}:${this.fill(minutes)}`; 225 }, 226 } 227 ``` 228 229  230 2313. 日期选择器 232 ```html 233 <!-- xxx.hml --> 234 <div class="container"> 235 <text class="title"> 236 Selected：{{time}} 237 </text> 238 <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> 239 </div> 240 ``` 241 242 ```css 243 /* xxx.css */ 244 .container { 245 flex-direction: column; 246 justify-content: center; 247 align-items: center; 248 left: 0px; 249 top: 0px; 250 width: 454px; 251 height: 454px; 252 } 253 .title { 254 font-size: 30px; 255 text-align: center; 256 margin-top: 20px; 257 } 258 .date-picker { 259 width: 500px; 260 height: 400px; 261 margin-top: 50px; 262 } 263 ``` 264 265 ```js 266 /* xxx.js */ 267 export default { 268 data: { 269 date: "", 270 }, 271 handleChange(data) { 272 this.date = data.year + "年" + data.month + "月" + data.day + "日"; 273 }, 274 } 275 ``` 276  277 2784. 日期时间选择器 279 ```html 280 <!-- xxx.hml --> 281 <div class="container"> 282 <text class="title"> 283 Selected：{{datetime}} 284 </text> 285 <picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view> 286 </div> 287 ``` 288 289 ```css 290 /* xxx.css */ 291 .container { 292 flex-direction: column; 293 justify-content: center; 294 align-items: center; 295 left: 0px; 296 top: 0px; 297 width: 500px; 298 height: 454px; 299 } 300 .title { 301 font-size: 30px; 302 text-align: center; 303 margin-top: 20px; 304 } 305 .date-picker { 306 width: 500px; 307 height: 400px; 308 margin-top: 50px; 309 } 310 ``` 311 312 ```js 313 /* xxx.js */ 314 export default { 315 data: { 316 datetime: "", 317 }, 318 handleChange(data) { 319 this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分"; 320 }, 321 } 322 ``` 323  324 3255. 多列文本选择器 326 327 ```html 328 <!-- xxx.hml --> 329 <div class="container"> 330 <text class="title"> 331 Selected：{{ value }} 332 </text> 333 <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view> 334 </div> 335 ``` 336 337 ```css 338 /* xxx.css */ 339 .container { 340 flex-direction: column; 341 justify-content: center; 342 align-items: center; 343 left: 0px; 344 top: 0px; 345 width: 500px; 346 height: 454px; 347 } 348 .title { 349 font-size: 30px; 350 text-align: center; 351 margin-top: 20px; 352 } 353 ``` 354 355 ```js 356 /* xxx.js */ 357 export default { 358 data: { 359 multitext: [ 360 [1, 2, 3], 361 [4, 5, 6], 362 [7, 8, 9], 363 ], 364 value: "" 365 }, 366 handleChange(data) { 367 this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected; 368 }, 369 } 370 ``` 371 
