Picker.js：让前端选择器变得如此简单
1.介绍
pickerjs是移动端很好用的的筛选器组件，高仿 ios 的 UIPickerView ，非常流畅的体验。
2.特点
支持单列、多列选择
支持动态更新每列的数据
githup源码地址点击跳转(备注:githup上此项目已经停止更新作者不再维护,我是因为老项目在使用,所以写在这备注一下)
3.如何使用
通过npm引入,安装picker.js
npm install pickerjs
通过 CDN 引入
下载本地文件引入
-
访问 pickerjs GitHub 下载源码。
-
将 dist 目录中的 picker.min.js 和 picker.min.css 文件复制到你的项目中。
-
在 HTML 中引入：
4.代码中引入如下:
// 引入better-picker
import Picker from 'pickerjs'
// 如果不支持import, 请使用
var Picker = require('pickerjs')
4.Picker.js使用文档
语法如下:
new Picker(element[, options])
-
element
- Type: HTMLElement
- The target element for picking.
-
options (optional)
- Type: Object
- The options for picking. Check out the available options.
options说明
options.title (String)
筛选器标题，默认为空。
options.data (Array)
筛选器的数据，是一个二维数组，第一维表示多少列数据，第二维表示每列的数据，单个数据是一个 object，由 text 和 value 两个字段组成，text 表示显示在筛选器的文本，value 表示数据的值。
options.selectedIndex (Array)
筛选器初始化默认选择的数据索引，是一个二维数组，第一维表示列的序号，第二维表示每列的行号，从 0 开始。
示例
const input = document.getElementById('input'); const picker = new Picker(input, { format: 'YYYY/MM/DD HH:mm', });1. 初始化选项
在创建 Picker 实例时，可以通过传递配置对象来定制选择器的行为。以下是一些常用的选项：
属性名 类型 默认值 描述 format string 'YYYY-MM-DD' 设置日期或时间的格式（如 YYYY-MM-DD 或 HH:mm）。 headers boolean true 是否显示头部（标题、取消和确认按钮）。 controls boolean true 是否显示控制按钮（如上一月、下一月）。 text object {} 自定义文本（如标题、取消和确认按钮的文字）。 transition string 'fade' 设置过渡效果（如 fade、slide）。 data array [] 自定义数据（用于非日期时间的选择器）。 type string 'date' 设置选择器类型（如 date、time、color）。 rows number 3 设置显示的行数（适用于日期选择器）。 min Date null 设置最小可选日期或时间。 max Date null 设置最大可选日期或时间。 示例：
const picker = new Picker(document.getElementById('picker'), { format: 'YYYY-MM-DD', headers: true, controls: true, text: { title: '选择日期', cancel: '取消', confirm: '确定' }, transition: 'fade' });2. 方法
Picker 实例提供了一些方法，用于控制选择器的行为。
show (next)
显示筛选器，next 为筛选器显示后执行的回调函数。
hide ()
隐藏筛选器，一般来说，筛选器内部已经实现了隐藏逻辑，不必主动调用。
refill (datas)
重填全部数据，datas为二位数组，如[lists1, lists2, lists3]
refillColumn(index, data)
重填某一列的数据，index为列序号，data为数据数组。
scrollColumn(index, dist)
复位某一列的默认选项，index为列序号，dist为选项的下标，起始值为0
方法名 参数 返回值 描述 show() 无 无 手动显示选择器。 hide() 无 无 手动隐藏选择器。 destroy() 无 无 销毁选择器实例。 setValue() value 无 设置选择器的值（如日期、时间、颜色或自定义数据）。 getValue() 无 string 获取选择器的当前值。 update() 无 无 更新选择器的状态（如重新渲染）。 示例：
// 显示选择器 picker.show(); // 隐藏选择器 picker.hide(); // 设置默认值 picker.setValue('2023-10-01'); // 获取当前值 const value = picker.getValue(); console.log('当前值:', value); // 销毁选择器 picker.destroy();3. 事件
Picker 实例支持事件监听，可以通过 on 方法绑定事件。
picker.change
当一列滚动停止的时候，会派发 picker.change 事件，同时会传递列序号 index 及滚动停止的位置 selectedIndex。
picker.select
当用户点击确定的时候，会派发 picker.select 事件，同时会传递每列选择的值数组 selectedVal 和每列选择的序号数组 selectedIndex。
picker.cancel
当用户点击取消的时候，会派发picker.cancel事件。
picker.valuechange
当用户点击确定的时候，如果本次选择的数据和上一次不一致，会派发 picker.valuechange 事件，同时会传递每列选择的值数组 selectedVal 和每列选择的序号数组 selectedIndex。
事件名 触发时机 回调参数 描述 pick 当用户选择值后触发。 value 返回用户选择的值。 hide 当选择器关闭时触发。 无 无参数。 show 当选择器显示时触发。 无 无参数。 change 当选择器的值发生变化时触发。 value 返回当前的值。 示例：
// 监听选择事件 picker.on('pick', (value) => { console.log('选择的值:', value); }); // 监听选择器关闭事件 picker.on('hide', () => { console.log('选择器已关闭'); }); // 监听选择器显示事件 picker.on('show', () => { console.log('选择器已显示'); }); // 监听值变化事件 picker.on('change', (value) => { console.log('值已变化:', value); });4. 自定义数据
如果选择器用于非日期时间的数据（如民族、水果等），可以通过 data 选项设置自定义数据。
示例：
const fruits = [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' } ]; const picker = new Picker(document.getElementById('picker'), { data: fruits, headers: true, controls: true, text: { title: '选择水果', cancel: '取消', confirm: '确定' }, transition: 'fade' });5. 类型
Picker 支持多种类型的选择器，通过 type 选项设置
类型名 描述 date 日期选择器（默认）。 time 时间选择器。 color 颜色选择器。 custom 自定义数据选择器（需配合 data 选项使用）。 示例：
// 日期选择器 const datePicker = new Picker(document.getElementById('date-picker'), { type: 'date', format: 'YYYY-MM-DD' }); // 时间选择器 const timePicker = new Picker(document.getElementById('time-picker'), { type: 'time', format: 'HH:mm' }); // 颜色选择器 const colorPicker = new Picker(document.getElementById('color-picker'), { type: 'color' }); // 自定义数据选择器 const customPicker = new Picker(document.getElementById('custom-picker'), { type: 'custom', data: fruits });6. 其他功能
-
最小/最大日期：通过 min 和 max 选项限制可选日期范围。
const picker = new Picker(document.getElementById('picker'), { min: new Date(2023, 0, 1), // 最小日期为 2023-01-01 max: new Date(2023, 11, 31) // 最大日期为 2023-12-31 }); -
多语言支持：通过 text 选项自定义界面文本。
const picker = new Picker(document.getElementById('picker'), { text: { title: '选择日期', cancel: '取消', confirm: '确定' } });5.使用picker.js踩坑
在使用 picker.js 时，虽然它非常灵活和强大，但在实际开发中仍然有一些需要注意的地方和容易踩坑的点。以下是常见的注意事项和解决方案：
1. 日期格式问题
-
问题：如果 format 设置不正确，可能会导致日期显示或解析错误。
-
解决方案：
-
确保 format 与输入框的值格式一致。
-
使用标准的日期格式符号，如 YYYY 表示年份，MM 表示月份，DD 表示日期。
-
示例：
const picker = new Picker(document.getElementById('date-picker'), { format: 'YYYY-MM-DD' // 确保格式正确 });2. 默认值设置问题
-
问题：如果默认值的格式与 format 不匹配，可能会导致选择器无法正确显示默认值。
-
解决方案：
-
确保默认值的格式与 format 一致。
-
示例：
const picker = new Picker(document.getElementById('date-picker'), { format: 'YYYY-MM-DD' }); picker.setValue('2023-10-01'); // 默认值必须符合 format3. 自定义数据选择器的值问题
-
问题：如果自定义数据的 value 与选择器的值不匹配，可能会导致选择器无法正确显示选中项。
-
解决方案：
-
确保 setValue 的值是 data 中某一项的 value。
-
示例：
const fruits = [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' } ]; const picker = new Picker(document.getElementById('custom-picker'), { data: fruits }); picker.setValue('banana'); // 必须使用 data 中的 value4. 事件重复绑定问题
-
问题：如果多次调用 on 方法绑定同一个事件，可能会导致事件处理函数被重复执行。
-
解决方案：
-
在绑定事件之前，先使用 off 方法解绑旧的事件处理函数。
-
示例：
const handlePick = (value) => { console.log('选择的值:', value); }; // 先解绑旧的事件处理函数 picker.off('pick', handlePick); // 绑定新的事件处理函数 picker.on('pick', handlePick);5. 选择器销毁问题
-
问题：如果选择器实例没有被正确销毁，可能会导致内存泄漏或重复绑定事件。
-
解决方案：
-
在不需要选择器时，调用 destroy 方法销毁实例。
-
示例：
const picker = new Picker(document.getElementById('picker'), { format: 'YYYY-MM-DD' }); // 销毁选择器 picker.destroy();6. 动态更新数据问题
-
问题：如果选择器的数据需要动态更新（如从服务器加载），可能会导致选择器无法正确显示新数据。
-
解决方案：
-
在更新数据后，调用 update 方法重新渲染选择器。
-
示例：
const picker = new Picker(document.getElementById('custom-picker'), { data: [] }); // 动态更新数据 const newData = [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' } ]; picker.options.data = newData; picker.update(); // 重新渲染选择器7. 移动端兼容性问题
-
问题：在移动端，选择器的样式或交互可能不符合预期。
-
解决方案：
-
使用 viewport 标签确保页面适配移动端。
-
检查选择器的样式是否适配小屏幕设备。
-
示例：
8. 性能问题
-
问题：如果页面中有多个选择器实例，可能会导致性能下降。
-
解决方案：
-
仅在需要时初始化选择器。
-
在不需要时销毁选择器实例。
-
示例：
// 延迟初始化选择器 document.getElementById('picker').addEventListener('focus', () => { const picker = new Picker(document.getElementById('picker'), { format: 'YYYY-MM-DD' }); });9. 样式冲突问题
-
问题：如果页面中的其他 CSS 样式与 picker.js 的样式冲突，可能会导致选择器显示异常。
-
解决方案：
-
使用 scoped CSS 或 CSS 模块化技术避免样式冲突。
-
检查并覆盖冲突的样式。
-
示例：
/* 覆盖冲突的样式 */ .picker-modal { z-index: 1000 !important; }10. 浏览器兼容性问题
-
问题：在某些旧版浏览器中，picker.js 可能无法正常工作。
-
解决方案：
-
确保浏览器支持 ES6 语法。
-
如果需要兼容旧版浏览器，可以使用 Babel 转译代码。
-
示例
# 使用 Babel 转译代码 npm install @babel/core @babel/preset-env
6.完整示例代码（带默认值）
以下是完整的示例代码，展示了如何为日期选择器、时间选择器、颜色选择器和自定义数据选择器设置默认值
Picker.js 默认值示例 body { font-family: Arial, sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 500px; width: 100%; } h1 { text-align: center; color: #333; margin-bottom: 20px; } .input-group { margin-bottom: 15px; } .input-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } .input-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; box-sizing: border-box; } .input-group input:focus { border-color: #007bff; outline: none; } .btn { display: block; width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 10px; } .btn:hover { background-color: #0056b3; }Picker.js 默认值示例
选择日期 选择时间 选择颜色 选择水果 提交 // 初始化日期选择器 const datePicker = new Picker(document.getElementById('date-picker'), { format: 'YYYY-MM-DD', // 日期格式 headers: true, // 显示头部 controls: true, // 显示控制按钮 text: { title: '选择日期', cancel: '取消', confirm: '确定' }, transition: 'fade' // 过渡效果 }); // 设置日期选择器的默认值 datePicker.setValue('2023-10-01'); // 初始化时间选择器 const timePicker = new Picker(document.getElementById('time-picker'), { format: 'HH:mm', // 时间格式 headers: true, controls: true, text: { title: '选择时间', cancel: '取消', confirm: '确定' }, transition: 'fade' }); // 设置时间选择器的默认值 timePicker.setValue('14:30'); // 初始化颜色选择器 const colorPicker = new Picker(document.getElementById('color-picker'), { type: 'color', // 颜色选择器 headers: true, controls: true, text: { title: '选择颜色', cancel: '取消', confirm: '确定' }, transition: 'fade' }); // 设置颜色选择器的默认值 colorPicker.setValue('#ff0000'); // 自定义数据选择器 const fruits = [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' }, { value: 'grape', label: '葡萄' } ]; const customPicker = new Picker(document.getElementById('custom-picker'), { data: fruits, // 自定义数据 headers: true, controls: true, text: { title: '选择水果', cancel: '取消', confirm: '确定' }, transition: 'fade' }); // 设置自定义数据选择器的默认值 customPicker.setValue('banana'); // 提交函数 function submit() { const selectedDate = document.getElementById('date-picker').value; const selectedTime = document.getElementById('time-picker').value; const selectedColor = document.getElementById('color-picker').value; const selectedFruit = document.getElementById('custom-picker').value; alert(`您选择的日期是：${selectedDate}\n您选择的时间是：${selectedTime}\n您选择的颜色是：${selectedColor}\n您选择的水果是：${selectedFruit}`); }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
