开源H5选择器UI组件—

Picker.js是一个纯用js+css3 transition特性构建的纯h5滚动选择器，它能实现近似原生IOS datePicker的滚动选择效果，同时利用js回调函数捕捉常用的几个自定义事件来实现几列菜单级联效果。而且它可以让你自定义列数，支持1-3列列表，一个picker搞定各种菜单栏。
1.引入方式

<script src="scripts/picker.min.js"></script>

2.html

<h3>单列筛选器</h3>
<div id="picker1">点击选择</div>

3.js

<script>var data1 = [{text: '剧毒',value: 1}, {text: '蚂蚁',value: 2},{text: '幽鬼',value: 3},{text: '主宰',value: 4},{text: '卡尔',value: 5},{text: '宙斯',value: 6},{text: '巫医',value: 7}, {text: '巫妖',value: 8},{text: '神谕者',value: 9},{text: '撼地神牛',value: 10},{text: '蓝胖子',value: 11},{text: '水晶室女',value: 12},{text: '莉娜',value: 13},{text: '斯拉克',value: 14},{text: '斯拉达',value: 15}];var picker1El = document.getElementById('picker1');var picker1 = new Picker({data: [data1]//初始化数据});picker1.on('picker.select', function (selectedVal, selectedIndex) {// 当用户点击确定的时候，会派发picker.select事件，同时会传递每列选择的值数组selectVal和每列选择的序号数组selectIndex。picker1El.innerText = data1[selectedIndex[0]].text;});picker1.on('picker.change', function (index, selectedIndex) {console.log(index);//当一列滚动停止的时候，会派发picker.change事件，同时会传递列序号index及滚动停止的位置selectIndex。});picker1.on('picker.valuechange', function (selectedVal, selectedIndex) {console.log(selectedVal);//当用户点击确定的时候，如果本次选择的数据和上一次不一致，会派发picker.valuechange事件，同时会传递每列选择的值数组selectVal和每列选择的序号数组selectIndex。});picker1El.addEventListener('click', function () {picker1.show();//show 方法，展示picker菜单});
</script>

picker.js全部代码都开源github上，docs文件下有详细例子

开源H5选择器UI组件——Picker.js相关推荐

Thor UI - 轻量简洁的免费开源移动端 UI 组件库，支持原生小程序和 uni-app
用来快速开发原生小程序或者通过 uni-app 来开发任何小程序甚至是 APP 的组件库,但我很好奇中文名是不是译作雷神 UI. Thor UI 介绍 Thor UI 是一款开发移动端网页应用.小程序 ...
OnsenUI - 专为混合开发/手机 web 应用打造的开源移动端 UI 组件库
具有原生应用外观的组件库,性能表现也非常不错,适合用来开发 App,值得关注和学习使用. 关于 Onsen UI Onsen UI 是一套专为移动应用设计的丰富的 UI 组件库,使用前端开发者熟悉的j ...
【转】前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...
Muse UI - 优雅的 Material Design 风格 UI 组件
一款基于 Vue 2.0 的 UI 组件库,按 Material Design 设计规范实现,体验优秀,使用简单. Muse UI 介绍 Muse UI 是一款基于 Vue.js 的优雅 UI 组件库 ...
react-native调用Android原生UI组件
当react-native的UI组件不能满足需求时,可以考虑在原生自定UI组件,让RN调用.使用原生UI所考虑的问题: 一.原生UI被调用; 二.修改原生UI属性值; 三.捕捉原生UI的响应; 四.R ...
WeUI - 微信官方推出的免费开源 UI 组件库，上手简单，风格简约，在微信生态开发轻量项目的绝佳选择
微信早年发布的 UI 框架,对想要创建让微信用户感到熟悉的应用来说,是一个好选择. 关于 WeUI WeUI 一款由腾讯微信团队开发的 UI 组件库,是一套同微信原生视觉体验一致的基础样式库,由微信官 ...
Vue.js之UI组件elementUI——MintUI
目的: 为了提高开发效率功能原则: 拿过来直接使用 vue-cli -> vue-loader bower 前端包管理器 jquery#1.11.1 自动解决依赖 npm node包管理 ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...
微信小程序基于mpvue的ui组件之选择器
第一次自己开发组件,希望大家能够指出错误的地方或者改进的思路~ 先上图片主页面选中状态返回结果说明,该UI组件是为小程序而开发的,能够对传入的参数进行处理,最多加载四个选择器,最少一个创建文 ...

开源H5选择器UI组件——Picker.js

开源H5选择器UI组件——Picker.js相关推荐

最新文章

热门文章