Nuclear Pumpkin Mayhem

    spring-picker2

    2.3.7 • Public • Published

    移动端react选择器,支持拓展二级联动,三级联动

    forked from springalskey/picker

    在原有的基础上优化了实现,更换了更清晰的数据格式,更好的交互体验。

    特点

    • ios的滚轮UI风格
    • 更合理的用户交互
    • 支持多级联动,选项动态更新
    • 灵活的选项配置
    • 兼容ios的背景滚动问题

    demo预览

    Chrome打开开发者工具,切换到手机模拟器预览
    https://nonjene.github.io/demo/spring-picker2/index.html

    手机二维码扫描预览 image

    如何使用

    $ 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

    Keywords

    none

    Install

    npm i spring-picker2

    DownloadsWeekly Downloads

    1

    Version

    2.3.7

    License

    MIT

    Unpacked Size

    264 kB

    Total Files

    27

    Last publish

    Collaborators

    • nonjene