Skip to content

popoPicker是一个移动端3D滚轮日期时间和单项的选择器,支持无限循环滚动,不依赖第三方库

License

Notifications You must be signed in to change notification settings

po-po/popoPicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

项目简介 在线预览

  • popoPicker是一个仿iOS的3D滚轮选择器,支持无限循环滚动,采用原生js,不依赖任何第三方库,速度更快;

  • popoDatetime是建立在popoPicker之上的3D日期时间选择器,可自定义滚动循环,背景主题、位置等信息,具备时间选择、日期选择、日期时间同时选择的功能,具体配置请阅读参数文档。

滚轮样式

demo

如何使用

<!-- 引入样式 -->
<link href="popoPicker.css" rel="stylesheet">

<!-- 引入脚本 -->
<script src='popodatetime.js'></script>
//Picker
new popoPicker('.js-picker',{
    container:'.screen',
    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',{
   container:'.screen',
   time: false
});

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

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

popoPicker

属性property 类型type 默认default 描述description
wheels Array [] wheels为滚轮的数据内容,例如:wheels: [{ infinite: false, selected: 3, data:[ {value:0,display:'选项一'}]}] infinit: bool 是否无限循环滚轮;selected: Number 选中的value;data: Array 滚轮数据
container String 'body' 选择器所在的父级
scrollType String '3d' 滚轮的显示模式,分2d,和3d
background String 'light' 主题背景颜色'light'和'dark'
display String 'bottom' 滚轮显示位置
headTitle String '' 滚轮顶部标题
init Function * 初始加载完成后执行
getResult Function * 返回滚动时的结果
save Function * 点击确定
cancel Function * 点击取消

popoDatetime

属性property 类型type 默认default 描述description
container String 'body' 选择器所在的父级
scrollType String '3d' 滚轮的显示模式,分2d,和3d
background String 'light' 主题背景颜色'light'和'dark'
labelType String 'symbol' 滚轮label 类型有symbol符号,text文字,split分割线(需date和time同时存在)
display String 'bottom' 滚轮显示位置
headResult Bool false 滚轮顶部栏目显示结果
date Bool true 是否显示日期
time Bool true 是否显示时间
beginYear Number new Date().getFullYear()-100 开始年份
endYear Number new Date().getFullYear()+100 结束年份
save Function * 点击确定
cancel Function * 点击取消

License

MIT

Copyright (c) 2018, popo

About

popoPicker是一个移动端3D滚轮日期时间和单项的选择器,支持无限循环滚动,不依赖第三方库

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published