Cople / Wheelpicker
Licence: mit
仿 iOS UIPickerView 的滚动选择器
Stars: ✭ 41
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Wheelpicker
React Timekeeper
Google Keep app inspired time picker for react 🕓
Stars: ✭ 651 (+1487.8%)
Mutual labels: picker
Qpdialcodepickerview
International Dial Code Picker View for Country or Area 国家或地区国际区号选择器
Stars: ✭ 15 (-63.41%)
Mutual labels: picker
Wheelpicker
A smooth, highly customizable wheel view and picker view, support 3D effects like iOS. 一个顺滑的、高度自定义的滚轮控件和选择器,支持类似 iOS 的 3D 效果
Stars: ✭ 684 (+1568.29%)
Mutual labels: picker
React Native Raw Bottom Sheet
Add Your Own Component To Bottom Sheet Whatever You Want (Android and iOS)
Stars: ✭ 771 (+1780.49%)
Mutual labels: picker
Bottomsheetpicker
BottomSheet picker to select one or multiple files. Allows taking photos / videos / select from camera gallery / pick a different file
Stars: ✭ 25 (-39.02%)
Mutual labels: picker
Linear Time Picker
Gorgeous Android Time and Date picker library inspired by the Timely app
Stars: ✭ 613 (+1395.12%)
Mutual labels: picker
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+2219.51%)
Mutual labels: picker
React Native Image Picker
🌄 A React Native module that allows you to use native UI to select media from the device library or directly from the camera.
Stars: ✭ 7,431 (+18024.39%)
Mutual labels: picker
Storage Chooser
Lets user choose files in internal or external storage with just few lines of code.
Stars: ✭ 689 (+1580.49%)
Mutual labels: picker
Colorpicker
A mininal but complete colorpicker desktop app
Stars: ✭ 766 (+1768.29%)
Mutual labels: picker
React Datepicker
A simple and reusable datepicker component for React
Stars: ✭ 6,206 (+15036.59%)
Mutual labels: picker
React Native Number Please
🔢 Generate react-native pickers with range numbers.
Stars: ✭ 30 (-26.83%)
Mutual labels: picker
Louvre
A small customizable library useful to handle an gallery image pick action built-in your app. 🌄🌠
Stars: ✭ 629 (+1434.15%)
Mutual labels: picker
Singledateandtimepicker
You can now select a date and a time with only one widget !
Stars: ✭ 921 (+2146.34%)
Mutual labels: picker
Webfontpicker
A bookmarklet that previews Google Fonts on a live website
Stars: ✭ 31 (-24.39%)
Mutual labels: picker
React Picky Date Time
A react component for date time picker. Online demo examples
Stars: ✭ 31 (-24.39%)
Mutual labels: picker
WheelPicker
仿 iOS UIPickerView 的滚动选择器
演示
安装
NPM
npm install wheel-picker --save
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wheel-picker/dist/wheelpicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/wheel-picker/dist/wheelpicker.min.js"></script>
使用
var frutis = ["草莓", "柠檬", "菠萝"];
var vegetables = [{
text: "番茄",
value: "tomato"
}, {
text: "蘑菇",
value: "mushroom"
}, {
text: "土豆",
value: "potato"
}];
var picker1 = new WheelPicker({
title: "最爱的水果",
data: [frutis],
onSelect: function(selected) {
alert("你选择的是:" + selected[0].text);
}
});
var picker2 = new WheelPicker({
title: "最爱的水果和蔬菜",
el: "#demo",
data: [frutis, vegetables],
value: ["柠檬", "potato"],
formatValue: function(value) {
return "你选择的分别是:" + value.join("、");
}
});
选项
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
title | string | null | 标题 |
el | element | null | 选择器对应的 input 元素 |
hiddenInput | boolean | false | 将 el.type 设置为 hidden 并用于保存 value 值;再 clone 一个 el 元素用于显示 text 值 |
hideOnBackdrop | boolean | false | 点击遮罩层关闭组件(相当于点击取消按钮) |
data | array | [] | 每列的数据组成的数组 |
value | array | [] | 每列的默认值组成的数组 |
rows | number | 5 | 可见的行数(奇数) |
rowHeight | number | 34 | 行高 |
formatValue | function | val => val.split(" ") |
从 el 元素获取默认值 |
parseValue | function | val => val.join(" ") |
保存时填充到 el 或 cloneNode 的值 |
parseHiddenValue | function | val => val.join(" ") |
保存时填充到 el 的值(如果 hiddenInput 为 true) |
onRender | function | null | 生成组件 DOM 时触发,参数为组件元素 |
onShow | function | null | 显示组件时触发 |
onChange | function | null | 滚动导致值变化时触发,参数为发生变化的列的索引值和选中项 |
onSelect | function | null | 点击确定时触发,参数为条目数组 |
onCancel | function | null | 点击取消时触发 |
方法
picker.getValue([index:number])
返回值数组或指定列的值
picker.setValue(value:array)
picker.setValue(value:string, index:number)
设置各列的值或指定列的值
picker.getSelectedItems()
返回选中的条目数组
picker.getData([index:nubmer])
返回数据数组或指定列的数据
picker.setData(data:array [, value:array])
picker.setData(data:array, index:number [, value:string])
设置各列或指定列的数据和值
picker.show()
显示组件
picker.hide()
隐藏组件
picker.enable()
启用组件
picker.disable()
禁用组件
picker.destory()
销毁组件
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].