{"id":13672934,"url":"https://github.com/laden666666/my-picker","last_synced_at":"2025-04-28T04:30:37.357Z","repository":{"id":57306225,"uuid":"73243684","full_name":"laden666666/my-picker","owner":"laden666666","description":"高仿IOS的PickerView的JavaScript插件，3D形式的滚轮选择器，同时支持最多三级联动的选择效果，支持pc端和移动端两种平台浏览器。","archived":false,"fork":false,"pushed_at":"2019-11-10T08:44:54.000Z","size":5070,"stargazers_count":51,"open_issues_count":1,"forks_count":15,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T11:18:53.129Z","etag":null,"topics":["3dpicker","html5","javascript","picker"],"latest_commit_sha":null,"homepage":"https://laden666666.github.io/my-picker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laden666666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-09T01:49:35.000Z","updated_at":"2024-02-27T23:50:43.000Z","dependencies_parsed_at":"2022-09-06T19:40:39.370Z","dependency_job_id":null,"html_url":"https://github.com/laden666666/my-picker","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laden666666%2Fmy-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laden666666%2Fmy-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laden666666%2Fmy-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laden666666%2Fmy-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laden666666","download_url":"https://codeload.github.com/laden666666/my-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251251799,"owners_count":21559662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3dpicker","html5","javascript","picker"],"created_at":"2024-08-02T09:01:58.564Z","updated_at":"2025-04-28T04:30:35.723Z","avatar_url":"https://github.com/laden666666.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003emy-picker\u003c/h2\u003e\u003cp class=\"mydoc_api_npm-info\" align=\"center\"\u003e\n            \u003ca href=\"https://www.npmjs.com/package/my-picker\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/my-picker.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n            \u003ca href=\"https://www.npmjs.com/package/my-picker\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/my-picker.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n            \u003ca href=\"https://www.npmjs.com/package/my-picker\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/my-picker.svg\" alt=\"License\"\u003e\u003c/a\u003e\n        \u003c/p\u003e\n高仿IOS的PickerView的JavaScript插件，3D形式的滚轮选择器，同时支持最多三级联动的选择效果，支持pc端和移动端两种平台浏览器。支持chrome及移动端默认浏览器、ie（10-11）、火狐浏览器。\n\n\n### 功能\n*   0、3D形式的滚轮选择器，带有透视效果\n*   1、选择器的前缀与后缀\n*   2、级联选择器\n*   3、提供选择音效，更接近原生控件\n*   4、支持手机和pc\n\n\n## 使用文档\n\n请参考[https://laden666666.github.io/my-picker/](https://laden666666.github.io/my-picker/ \"\") \n\n\n\n## 源码\n\n[github](https://github.com/laden666666/my-picker \"\") ，[码云](https://gitee.com/laden666666/my-picker \"\") \n\n\n\n## 兼容性\n\n3D模式\n\n\u003ctable cellspacing=\"1\" style=\"margin: 0 auto;font-size: 14px;background-color: #f9f9f9;color: #036;padding: 3px;border-radius: 4px;border: 1px solid rgba(220, 220, 220, .5);\"\u003e\n    \u003ccolgroup width=\"100\" span=\"6\" align=\"center\"\u003e\u003c/colgroup\u003e\n    \u003ctr style=\"height: 30px;\"\u003e\n        \u003cth align=\"center\"\u003eAndroid\u003c/td\u003e\u003cth align=\"center\"\u003eFirefox\u003c/td\u003e\u003cth align=\"center\"\u003eChrome\u003c/td\u003e\u003cth align=\"center\"\u003eiPhone\u003c/td\u003e\u003cth align=\"center\"\u003eEdge\u003c/td\u003e\u003cth align=\"center\"\u003eSafari\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr style=\"color: #000;line-height: 28px;font-weight: bold;\"\u003e\n        \u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e\u003e=5\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n非3D模式\n\n\u003ctable cellspacing=\"1\" style=\"margin: 0 auto;font-size: 14px;background-color: #f9f9f9;color: #036;padding: 3px;border-radius: 4px;border: 1px solid rgba(220, 220, 220, .5);\"\u003e\n    \u003ccolgroup width=\"100\" span=\"7\" align=\"center\"\u003e\u003c/colgroup\u003e\n    \u003ctr style=\"height: 30px;\"\u003e\n        \u003cth align=\"center\"\u003eAndroid\u003c/td\u003e\u003cth align=\"center\"\u003eFirefox\u003c/td\u003e\u003cth align=\"center\"\u003eChrome\u003c/td\u003e\u003cth align=\"center\"\u003eIE\u003c/td\u003e\u003cth align=\"center\"\u003eiPhone\u003c/td\u003e\u003cth align=\"center\"\u003eEdge\u003c/td\u003e\u003cth align=\"center\"\u003eSafari\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr style=\"color: #000;line-height: 28px;font-weight: bold;\"\u003e\n        \u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e\u003e=4.4\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e\u003e=10\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\u003ctd align=\"center\" style=\"background-color: #60d848\"\u003e√\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n移动端demo效果图:\n\n![Alt](./doc-jsx/images/mobileDemo.gif)\n\npc端demo效果图:\n\n![Alt](./doc-jsx/images/pcDemo.gif)\n\n\n## 安装\n\n### 浏览器环境\n\n浏览器环境直接导入dist下的**my-picker.js**和**my-picker.css**文件即可，也可以使用npm提供的cdn：\n\n```html\n\u003clink rel=\"stylesheet\" href=\"//unpkg.com/my-picker/dist/my-picker.css\"\u003e\n\u003cscript src=\"//unpkg.com/iview/dist/my-picker.min.js\"\u003e\u003c/script\u003e\u003c/script\u003e\n```\n\n\n### webpack环境\n\n执行cli命令\n\n```javascript\nnpm i my-picker -S\n```\n\n并在js文件中引用\n\n```javascript\nimport myPicker from 'my-picker'\nimport 'my-picker/my-picker.css'\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladen666666%2Fmy-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fladen666666%2Fmy-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fladen666666%2Fmy-picker/lists"}