支付宝小程序的UI样式向原生靠齐，picker组件不满足设计小姐姐的要求，然后卑微的切图仔出来搞了个自定义的picker组件样式。
老规矩效果图：
实现方案：
组件抛出四个属性：
属性 |
默认值 |
描述 |
pickerIndex |
[] |
默认选中下标，即弹起时默认选中第几项 |
show |
false |
是否显示picker弹窗 |
list |
[] |
picker可选项列表 |
title |
无 |
picker标题 |
组件JS, 接收父组件传递的值，以及抛出点击取消回调
Component({ data: {}, props: { pickerIndex: [], // 默认选中下标 show: false, // 是否显示 list: [], // 列表 title: '' // 标题 }, methods: { // 取消按钮点击 handlePickerCancle() { this.props.onCancle() }, // 确定按钮点击 handlePickerConfirm() { this.props.onConfirm({ key: this.data.pickerKey, value: this.data.pickerValue }) }, // picker切换 handlePickerChange(e) { this.setData({ pickerKey: e.detail.value[0], pickerValue: this.props.list[e.detail.value] }) } } })
页面引用方式：需注意默认选中第几项是个数组。
<qts-picker title="{{title}}" show="{{show}}" list="{{list}}" pickerIndex="{{index}}" onCancle="handleClick" onConfirm="handleConfirm" />
Page({ data: { show: false, // 是否显示picker title: '薪资单位', // picker标题 index: [2], // 默认选中第几项 list: ['日','周','月','季','年'], key: '', value: '' }, handleClick() { this.setData({ show: !this.data.show }) }, handleConfirm(e) { console.log(e) this.setData({ key: e.key, value: e.value }) this.handleClick() } })
完整代码片段如下：
https://pen.mini-code.com/s/dce92ada-f3c6-429a-8139-14ee583020bf
