Skip to content

shanghaife/picker

 
 

Repository files navigation

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

About

h5 picker inspired by ios UIPickerView

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.9%
  • CSS 2.4%
  • HTML 0.7%