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 打开日期选择列表。