npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

better-picker

v1.1.3

Published

h5 picker inspired by ios UIPickerView

Downloads

291

Readme

picker

移动端最好用的的筛选器组件,高仿 ios 的 UIPickerView ,非常流畅的体验。

##Fetures##

  • 支持单列、多列选择
  • 支持动态更新每列的数据

##依赖(无)## ~~picker依赖zeptogmu注意:gmu.js请使用demo里的gmu.js,gmu的基础库,和官网的略有不同。~~

1.x 版本不再依赖任何 3 方库,原生 JS 实现,可以直接使用

##如何使用##

html 部分:

<div id="name">点我选择</div>

JS 部分:

var nameEl = document.getElementById('name');

var data1 = [
	{
		text: '小美',
		value: 1
	}, {
		text: '猪猪',
		value: 2
	}
];

var data2 = [
	{
		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
	}
];

var data3 = [
	{
		text: '开心',
		value: 1
	}, {
		text: '生气',
		value: 2
	},
	{
		text: '搞笑',
		value: 3
	}, {
		text: '难过',
		value: 4
	}
];

var picker = new Picker({
	data: [data1, data2, data3],
	selectedIndex: [0, 1, 2],
	title: '我们都是小学生'
});

picker.on('picker.select', function (selectedVal, selectedIndex) {
	nameEl.innerText = data1[selectedIndex[0]].text + ' ' + data2[selectedIndex[1]].text + ' ' + data3[selectedIndex[2]].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();
});

###options options.title (String)

筛选器标题,默认为空。

options.data (Array)

筛选器的数据,是一个二维数组,第一维表示多少列数据,第二维表示每列的数据,单个数据是一个 object,由 text 和 value 两个字段组成,text 表示显示在筛选器的文本,value 表示数据的值。

options.selectedIndex (Array)

筛选器初始化默认选择的数据索引,是一个二维数组,第一维表示列的序号,第二维表示每列的行号,从 0 开始。

###事件 picker.change

当一列滚动停止的时候,会派发 picker.change 事件,同时会传递列序号 index 及滚动停止的位置 selectedIndex。

picker.select

当用户点击确定的时候,会派发 picker.select 事件,同时会传递每列选择的值数组 selectedVal 和每列选择的序号数组 selectedIndex。

picker.cancel

当用户点击取消的时候,会派发picker.cancel事件。

picker.valuechange

当用户点击确定的时候,如果本次选择的数据和上一次不一致,会派发 picker.valuechange 事件,同时会传递每列选择的值数组 selectedVal 和每列选择的序号数组 selectedIndex。

###编程接口 show (next)

显示筛选器,next 为筛选器显示后执行的回调函数。

hide ()

隐藏筛选器,一般来说,筛选器内部已经实现了隐藏逻辑,不必主动调用。

refill (datas)

重填全部数据,datas为二位数组,如[lists1, lists2, lists3]

refillColumn(index, data)

重填某一列的数据,index为列序号,data为数据数组。

scrollColumn(index, dist)

复位某一列的默认选项,index为列序号,dist为选项的下标,起始值为0

##如何构建 picker的源码是基于webpack构建的

首先,clone项目源码

git clone https://github.com/ustbhuangyi/picker.git

安装依赖

cd picker
npm install

测试demo页

npm run dev

打开浏览器访问如下地址, 查看效果

localhost:9090