E企盈小程序营销工具技术服务商 热线:4006-838-530

picker小程序底部弹起的滚动选择器[表单组件]

E企盈小程序直播系统

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; } 属性类型默认值描述rangeString[] / Object[][]String[] 时表示可选择的字符串列表;Object[] 时需指定 range-key 表示可选择的字段range-keyString-当 range 是一个 Object[] 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valueNumber-表示选择了 range 中的第几个(下标从 0 开始)。onChangeEventHandle-value 改变时触发,event.detail = {value: value}disabledBooleanfalse是否禁用说明:可以通过my.datePicker打开日期选择列表。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » picker小程序底部弹起的滚动选择器[表单组件]
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏