建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:12收藏

简介


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


JS移动端选择器插件picker.js-示例图



使用


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>



相关链接


GitHub 地址 :https://github.com/ustbhuangyi/picker

在线演示:http://www.bootstrapmb.com/item/5656/preview