让Android做出IOS的风格来!

2023-10-30 15:24:35 浏览数 (3)

我们在做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。

代码语言:javascript复制
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列。显然,我们能自定义列数!但移动端上,需要的列数应该不会很多

1 人点赞