最新消息:

第109款插件:picker.js筛选器组件

表单插件 杨红伟 19浏览

[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

最简代码

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