JS移动端选择器插件picker.js

来源：易助科技网浏览量：9收藏

简介

picker.js是一款原生 JS插件，可以直接使用。移动端最好用的的筛选器组件，高仿 ios 的 UIPickerView ，非常流畅的体验。

使用

1. 引入 picker.js 文件

2. HTML

<div id="name">test</div>

3. 调用

<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>