popoPicker

功能描述

popoPicker是一个仿iOS的3d滚轮选择器，无依赖，仅13kb

依赖插件

无

快速使用

//Picker
new popoPicker('.js-picker', {
    wheels: [{
        infinite: false,
        //selected: 3,
        data: [
            { value: 0, display: '选项一' },
            { value: 1, display: '选项二' },
            { value: 2, display: '选项三' },
            { value: 3, display: '选项四' },
            { value: 4, display: '选项五' },
            { value: 5, display: '选项六' },
            { value: 6, display: '选项七' }

        ]
    }],
    background: 'dark'
});

//Date
new popoDateTime('.js-date', {
    time: false,
    background: 'light'
});

//Time
new popoDateTime('.js-time', {
    date: false,
    background: 'dark'
});

//DateTime
new popoDateTime('.js-datetime', {
    background: 'dark'
});

popoPicker配置项

wheels

  • 类型：Array
  • 默认值：[]
  • 作用：滚轮的数据内容
  • 是否必传：是

container

  • 类型：String
  • 默认值：body
  • 作用：选择器所在的父级
  • 是否必传：否

scrollType

  • 类型：String
  • 取值：2d|3d
  • 默认值：3d
  • 作用：滚轮的显示模式
  • 是否必传：否

background

  • 类型：String
  • 取值：light|dark
  • 默认值：light
  • 作用：主题背景颜色
  • 是否必传：否

display

  • 类型：String
  • 默认值：bottom
  • 作用：滚轮显示位置
  • 是否必传：否

headTitle

  • 类型：String
  • 默认值：无
  • 作用：滚轮顶部标题
  • 是否必传：否

init

  • 类型：Function
  • 作用：初始加载完成后执行
  • 是否必传：否

getResult

  • 类型：Function
  • 作用：返回滚动时的结果
  • 是否必传：否

save

  • 类型：Function
  • 作用：点击确定
  • 是否必传：否

cancel

  • 类型：Function
  • 作用：点击取消
  • 是否必传：否

popoDateTime配置项

container

  • 类型：String
  • 默认值：body
  • 作用：选择器所在的父级
  • 是否必传：否

scrollType

  • 类型：String
  • 取值：2d|3d
  • 默认值：3d
  • 作用：滚轮的显示模式
  • 是否必传：否

background

  • 类型：String
  • 取值：light|dark
  • 默认值：light
  • 作用：主题背景颜色
  • 是否必传：否

display

  • 类型：String
  • 默认值：bottom
  • 作用：滚轮显示位置
  • 是否必传：否

date

  • 类型：Boolean
  • 默认值：true
  • 作用：是否显示日期
  • 是否必传：否

time

  • 类型：Boolean
  • 默认值：true
  • 作用：是否显示时间
  • 是否必传：否

save

  • 类型：Function
  • 作用：点击确定
  • 是否必传：否

cancel

  • 类型：Function
  • 作用：点击取消
  • 是否必传：否

特别说明

更多配置和用法，请参考popoPicker

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18