我们在做webApp 开发的时候,经常会碰到下拉菜单,二级甚至三级菜单联动的需求。通常我们会用iscroll模拟个可以弹性滚动的选择框,然后每次根据选择自己写一些回调逻辑。
但是,对于类似 IOS 原生UIPickerView的滚动选择效果,之前没有直接的组件。不过,现在有了。
Picker.js
就是一个高仿 IOS 的 UIPickerView效果的筛选器组件,拥有非常流畅的体验,由原生 JS 实现,不依赖任何插件和第三方库。
Picker.js简介
Picker.js
是一个纯用js css3 transition特性构建的纯h5滚动选择器,它能实现近似原生IOS datePicker的滚动选择效果,同时利用js回调函数捕捉常用的几个自定义事件来实现几列菜单级联效果。而且它可以让你自定义列数,支持1-3列列表,一个picker搞定各种菜单栏。
一起来看看它的效果。(采用的是官方示例)
单列
双列
三列
Picker.js
的好处就是:安卓4.3 ,IOS7 兼容。它基于纯CSS3动画实现滑动特效,动画流畅,各种webview,浏览器直接使用。比如数据联动。
如果我们使用原生的DatePicker,流畅度可以保证。但是IOS和安卓UI不统一风格,而且选择内容固定为时间。
安装使用
Picker.js
早期的版本还依赖zepto.js 和gmu.js。但1.x 版本开始,便不再依赖任何 3 方库,原生 JS 实现,可以直接使用。
安装
安装时注意,名称是better-picker
,不是直接名称 picker。
npm install better-picker --save-dev
使用
先引入
代码语言:javascript复制import Picker from 'better-picker'
再初始化使用。
代码语言:javascript复制var picker = new Picker({
data: [data1, data2, data3],
selectedIndex: [0, 1, 2],
title: '前端实验室'
});
有几列,data中就放几个数值。默认支持到3列。显然,我们能自定义列数!但移动端上,需要的列数应该不会很多