https://github.com/laden666666/my-picker

高仿IOS的PickerView的JavaScript插件，3D形式的滚轮选择器，同时支持最多三级联动的选择效果，支持pc端和移动端两种平台浏览器。
https://github.com/laden666666/my-picker

3dpicker html5 javascript picker

Last synced: 3 months ago
JSON representation

高仿IOS的PickerView的JavaScript插件，3D形式的滚轮选择器，同时支持最多三级联动的选择效果，支持pc端和移动端两种平台浏览器。

• Host: GitHub
• URL: https://github.com/laden666666/my-picker
• Owner: laden666666
• License: mit
• Created: 2016-11-09T01:49:35.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-11-10T08:44:54.000Z (almost 5 years ago)
• Last Synced: 2024-07-23T03:46:04.276Z (4 months ago)
• Topics: 3dpicker, html5, javascript, picker
• Language: TypeScript
• Homepage: https://laden666666.github.io/my-picker/
• Size: 4.84 MB
• Stars: 51
• Watchers: 2
• Forks: 15
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - my-picker

README

        
my-picker


            

            

            

        

高仿IOS的PickerView的JavaScript插件，3D形式的滚轮选择器，同时支持最多三级联动的选择效果，支持pc端和移动端两种平台浏览器。支持chrome及移动端默认浏览器、ie（10-11）、火狐浏览器。


### 功能

*   0、3D形式的滚轮选择器，带有透视效果

*   1、选择器的前缀与后缀

*   2、级联选择器

*   3、提供选择音效，更接近原生控件

*   4、支持手机和pc

## 使用文档

请参考[https://laden666666.github.io/my-picker/](https://laden666666.github.io/my-picker/ "") 

## 源码

[github](https://github.com/laden666666/my-picker "") ，[码云](https://gitee.com/laden666666/my-picker "") 

## 兼容性

3D模式

    

    

        AndroidFirefoxChromeiPhoneEdgeSafari

    

    

        >=5√√√√√

    

非3D模式

    

    

        AndroidFirefoxChromeIEiPhoneEdgeSafari

    

    

        >=4.4√√>=10√√√

    

移动端demo效果图:

![Alt](./doc-jsx/images/mobileDemo.gif)

pc端demo效果图:

![Alt](./doc-jsx/images/pcDemo.gif)

## 安装

### 浏览器环境

浏览器环境直接导入dist下的**my-picker.js**和**my-picker.css**文件即可，也可以使用npm提供的cdn：

```html

```

### webpack环境

执行cli命令

```javascript

npm i my-picker -S

```

并在js文件中引用

```javascript

import myPicker from 'my-picker'

import 'my-picker/my-picker.css'

```