spring-picker2
v2.3.7
Published
react picker
Downloads
14
Readme
移动端react选择器,支持拓展二级联动,三级联动
forked from springalskey/picker
在原有的基础上优化了实现,更换了更清晰的数据格式,更好的交互体验。
特点
- ios的滚轮UI风格
- 更合理的用户交互
- 支持多级联动,选项动态更新
- 灵活的选项配置
- 兼容ios的背景滚动问题
demo预览
Chrome打开开发者工具,切换到手机模拟器预览
https://nonjene.github.io/demo/spring-picker2/index.html
手机二维码扫描预览
如何使用
$ npm install spring-picker2 -S
import 'spring-picker/lib/style.css';
import { Picker, Popup, PopupPicker } from 'spring-picker';
constructor(){
// 数据结构例子
this.state = {
selected:{
year: '2018',
month: '02'
}
}
this.data = {
"year": [
{name:"2018年",value:"2018"},
{name:"2019年",value:"2019"},
],
"month":[
{name:"1月", value:"01"},
{name:"2月", value:"02"},
]
};
}
render(){
// 使用方式1,使用PopupPicker,只需要传递数据
<PopupPicker
data={this.data}
selectedValue={this.state.selected}
visible={this.state.userPickerVisible2}
liveUpdate={false}
onCancel={()=>this.setState({ userPickerVisible2: false })}
onSelect={selectedValue=>this.setState({
userPickerVisible2:false,
selectedValue
})}
onChanging={(selectedValue, key, value, name)=>{
console.log(selectedValue, key, value, name)
}}
/>
// 使用方式2,自己组合
<Popup
onCancel={this.cancelUserPicker.bind(this)}
onConfirm={this.closeUserPicker.bind(this)}
visible={this.state.userPickerVisible}>
<Picker
onChange={this.handleChangeUser.bind(this)}
data={this.data.year}
selectedValue={this.state.selected.year}
/>
</Popup>
}
API
PopupPicker
| props | type | default value | description |
|--|--| -- | -- |
| visible | bool | false
| 是否显示组件 |
| data | object | {}
| 选项列表数据,数据结构参考上面的例子 |
| selectedValue | object | {}
| 已选择的值 |
| liveUpdate | bool | false
| 用户滑动到某个位置时,是否立即是更新为选中☑️的值,并通过onSelect传递出去 |
| viewCount | number | 5
| 每列选项中可显示的行数。建议不要改,没有完全自动兼容UI。修改的话,请拷贝src/components/scss/index.scss
到自己的项目,并修改里面的$viewCount
变量。 |
| onSelect | func | undefined
| 用户点击确定
时触发,传递两个参数:(selectedValue, selectedName)
|
| onCancel | func | undefined
| 用户点击取消
时触发,无参数传递 |
| onChanging | func | undefined
| 用户正在滑动或选择时触发 |
Popup
| props | type | default value | description |
|--|--| --| -- |
| visible | boolean | 必填 | 是否显示组件 |
| onConfirm | func | 必填 | 用户点击确定
时触发 |
| onCancel | func | 必填 | 用户点击取消
时触发 |
Picker
| props | type | default value | description |
|--|--| --| -- |
| data | object | {}
| 选项列表数据,数据结构参考上面的例子 |
| selectedValue | object | {}
| 已选择的值 |
| onChange | func | undefined
| 用户正在或选择时触发 |
| viewCount | number | 5
| 同PopupPicker 的 viewCount |