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

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文件下有详细例子