picker小程序底部弹起的滚动选择器[表单组件]
注意：
- picker 组件在 iOS 系统中从底部弹出，在安卓系统中从中间弹出。
- picker 组件不支持多列选择，可以使用 picker-view 组件。
- 通过 my.multiLevelSelect 调用级联选择。
picker小程序滚动选择器扫码体验
picker小程序滚动选择器效果示例
picker小程序示滚动选择器例代码
选择器地区选择器当前选择：{{array[index]}}ObjectArray当前选择：{{objectArray[arrIndex].name}}// API-DEMO page/component/picker/picker.js Page({ data: { array: ['中国', '美国', '巴西', '日本'], objectArray: [ { id: 0, name: '美国', }, { id: 1, name: '中国', }, { id: 2, name: '巴西', }, { id: 3, name: '日本', }, ], arrIndex: 0, index: 0 }, bindPickerChange(e) { console.log('picker发送选择改变，携带值为', e.detail.value); this.setData({ index: e.detail.value, }); }, bindObjPickerChange(e) { console.log('picker发送选择改变，携带值为', e.detail.value); this.setData({ arrIndex: e.detail.value, }); }, }); /* API-DEMO page/component/picker/picker.acss */ .date-radio { padding: 26rpx; } .date-radio label + label { margin-left: 20rpx; } .row { display: flex; align-items: center; padding: 0 30rpx; } .row-title { flex: 1; padding-top: 28rpx; padding-bottom: 28rpx; font-size: 34rpx; color: #000; } .row-extra { flex-basis: initial; font-size: 32rpx; color: #888; } .row-arrow { width: 32rpx; height: 32rpx; margin-left: 16rpx; } | 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| range | String[] / Object[] | [] | String[] 时表示可选择的字符串列表；Object[] 时需指定 range-key 表示可选择的字段 |
| range-key | String | - | 当 range 是一个 Object[] 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
| value | Number | - | 表示选择了 range 中的第几个（下标从 0 开始）。 |
| onChange | EventHandle | - | value 改变时触发，event.detail = {value: value} |
| disabled | Boolean | false | 是否禁用 |
说明： 可以通过 my.datePicker 打开日期选择列表。
