多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] # (一) 简介 原生 JS 实现,可以直接使用。移动端最好用的的筛选器组件,高仿 ios 的 UIPickerView ,非常流畅的体验。 >不是jquery插件,是原生插件 不是jquery插件,是原生插件 不是jquery插件,是原生插件 # (二)官网地址 github地址: https://github.com/ustbhuangyi/picker # (三)最简代码相关 ## 本站预览 https://hongweizhiyuan.gitee.io/ijquery/picker/ ## 本站代码 https://gitee.com/hongweizhiyuan/ijquery/tree/master/picker ## 图片展示 ![mark](http://qiniu.newthink.cc/blog/180920/F6che7El4J.png) ## 最简代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>picker</title> <script type="text/javascript" src="picker.min.js"></script> </head> <body> <div id="name">test</div> <script> var nameEl = document.getElementById('name'); var data1 = [ { text: '张三', value: 1 }, { text: '李四', value: 2 } ]; var picker = new Picker({ data: [data1], selectedIndex: [0], title: '我们都是小学生' }); picker.on('picker.select', function (selectedVal, selectedIndex) { nameEl.innerText = data1[selectedIndex[0]].text; }); picker.on('picker.change', function (index, selectedIndex) { console.log(index); console.log(selectedIndex); }); picker.on('picker.valuechange', function (selectedVal, selectedIndex) { console.log(selectedVal); console.log(selectedIndex); }); nameEl.addEventListener('click', function () { picker.show(); }); </script> </body> </html> ```