Picker（Picker）

优质

小牛编辑

132浏览

2023-12-01

描述 (Description)

Picker看起来像iOS原生选择器，它是一个功能强大的组件，允许您从列表中选择任何值，也用于创建自定义重叠选择器。您可以将Picker用作内联组件或叠加层。叠加选择器将自动转换为平板电脑上的Popover（iPad）。

使用以下App的方法，您可以创建和初始化JavaScript方法 -

myApp.picker(parameters)

其中parameters是必需对象，用于初始化选择器实例，它是必需的方法。

选择器参数

下表指定了拣货员中的可用参数 -

S.No	参数和描述	类型	默认
1	container 带有CSS选择器或HTMLElement的字符串，用于为内联选择器生成Picker HTML。	字符串或HTMLElement	-
2	input 相关的input元素与字符串一起放置CSS选择器或HTMLElement。	字符串或HTMLElement	-
3	scrollToInput 无论何时打开选择器，它都用于滚动输入的视口（页面内容）。	boolean	true
4	inputReadOnly 用于在指定输入上设置“readonly”属性。	boolean	true
5	convertToPopover 它用于在iPad等大屏幕上将选择器模式转换为Popover。	boolean	true
6	onlyOnPopover 您可以通过启用它来打开Popover中的选择器。	boolean	true
7	cssClass 要选择模态，您可以使用其他CSS类名。	string	-
8	closeByOutsideClick 您可以通过启用方法单击选择器或输入元素外部来关闭选取器。	boolean	false
9	toolbar 它用于启用选取器模式工具栏。	boolean	true
10	toolbarCloseText 用于完成/关闭工具栏按钮。	string	'Done'
11	toolbarTemplate 它是工具栏HTML模板，默认情况下它是带有以下模板的HTML字符串 - `<div class = "toolbar"> <div class = "toolbar-inner"> <div class = "left"></div> <div class = "right"> <a href = "#" class = "link close-picker"> {{closeText}} </a> </div> </div> </div>`	string	-

特定的选择器参数

下表列出了可用的特定选择器参数 -

S.No	参数和描述	类型	默认
1	rotateEffect 它可以在拾取器中实现3D旋转效果。	boolean	false
2	momentumRatio 当您在快速触摸和移动后释放拾取器时，它会产生更多动量。	number	7
3	updateValuesOnMomentum 用于在动量期间更新拣货员和输入值。	boolean	false
4	updateValuesOnTouchmove 用于在触摸移动期间更新拾取器和输入值。	boolean	true
5	value 数组具有其初始值，每个数组项也表示相关列的值。	array	-
6	formatValue 该函数用于格式化输入值，它应返回新的/格式化的字符串值。 values和displayValues是相关列的数组。	function (p, values, displayValues)	-
7	cols 每个数组项表示具有列参数的对象。	array	-

选择器参数回调

下表显示了选择器中可用的回调函数列表 -

S.No	回调和描述	类型	默认
1	onChange 每当values and displayValues值改变且values and displayValues是相关列的数组时，将执行回调函数。	function (p, values, displayValues)	-
2	onOpen 无论何时打开选择器，都将执行回调函数。	function (p)	-
3	onClose 只要选择器关闭，就会执行回调函数。	function (p)	-

S.No

回调和描述

类型

默认

onChange

每当values and displayValues值改变且values and displayValues是相关列的数组时，将执行回调函数。

function (p, values, displayValues)

onOpen

无论何时打开选择器，都将执行回调函数。

function (p)

onClose

只要选择器关闭，就会执行回调函数。

function (p)

列参数

在配置Picker时，我们需要传递cols参数。它表示为数组，其中每个项目都是具有列参数的对象 -

S.No	参数和描述	类型	默认
1	values 您可以使用数组指定字符串列值。	array	-
2	displayValues 它具有带字符串列值的数组，它将显示values参数的values ，如果未指定。	array	-
3	cssClass 用于在列HTML容器上设置的CSS class名。	string	-
4	textAlign 它用于设置列值的文本对齐方式，可以是"left", "center" or "right" 。	string	-
5	width 默认情况下，自动计算宽度。如果需要使用应该在px相关列来修复选择器中的列宽。	number	-
6	divider 它用于应该是可视分割器的列，它没有任何值。	boolean	false
7	content 它用于指定divider-column (divider:true)和列的内容。	string	-

列回调参数

S.No	回调和描述	类型	默认
1	onChange 每当列值发生变化时，将执行回调函数。 value and displayValue表示当前列value and displayValue 。	function (p, value, displayValue)	-

S.No

回调和描述

类型

默认

onChange

每当列值发生变化时，将执行回调函数。 value and displayValue表示当前列value and displayValue 。

function (p, value, displayValue)

选择器属性

Picker变量有许多属性，如下表所示 -

S.No	属性和描述
1	myPicker.params 您可以使用object初始化传递的参数。
2	myPicker.value 每列的选定值由项数组表示。
3	myPicker.displayValue 每列的选定显示值由项数组表示。
4	myPicker.opened 打开选择器时，它将设置为true值。
5	myPicker.inline 当选择器是内联时，它设置为true值。
6	myPicker.cols Picker列有自己的方法和属性。
7	myPicker.container Dom7实例用于HTML容器。

选择方法

picker变量有一些有用的方法，如下表所示 -

S.No	方法和描述
1	myPicker.setValue(values, duration) 用于设置新的选择器值。值位于数组中，其中每个项表示每列的value 。 duration - 以ms为单位的转换持续时间。
2	myPicker.open() 用于打开Picker。
3	myPicker.close() 用于关闭Picker。
4	myPicker.destroy() 用于销毁Picker实例并删除所有事件。

列属性

myPicker.cols数组中的每一列也都有自己的有用属性，如下表所示 -

//Get first column
var col = myPicker.cols[0];

S.No	属性和描述
1	col.container 您可以使用列HTML容器创建实例。
2	col.items 您可以使用列项HTML元素创建实例。
3	col.value 用于选择当前列值。
4	col.displayValue 用于选择显示的当前列值。
5	col.activeIndex 给出当前索引号，这是选定/活动项。

列方法

有用的列方法如下表所示 -

S.No	方法和描述
1	col.setValue(value, duration) 用于为当前列设置新值。该value必须是新值， duration是以ms为单位的转换持续时间。
2	col.replaceValues(values, displayValues) 用于将列值和displayValues替换为新值。

S.No

方法和描述

col.setValue(value, duration)

用于为当前列设置新值。该value必须是新值， duration是以ms为单位的转换持续时间。

col.replaceValues(values, displayValues)

用于将列值和displayValues替换为新值。

每当您将Picker初始化为内联选择器时，它用于从其HTML容器访问Picker的实例。

var myPicker = $$('.picker-inline')[0].f7Picker;

下表中指定了不同类型的拣货员 -

S.No	选项卡类型和描述
1	单值选择器它是一个功能强大的组件，允许您从列表中选择任何值。
2	两个值和3D旋转效果在拾取器中，您可以使用3D旋转效果。
3	依赖值值与指定元素相互依赖。
4	自定义工具栏您可以在单个页面上使用一个或多个选择器进行自定义。
5	内联选择器/日期时间您可以在内联选择器中选择多个值。类似日期的date, month, year和时间包括hours, minutes, seconds.

S.No	选项卡类型和描述
1	单值选择器它是一个功能强大的组件，允许您从列表中选择任何值。
2	两个值和3D旋转效果在拾取器中，您可以使用3D旋转效果。
3	依赖值值与指定元素相互依赖。
4	自定义工具栏您可以在单个页面上使用一个或多个选择器进行自定义。
5	内联选择器/日期时间您可以在内联选择器中选择多个值。类似日期的date, month, year和时间包括hours, minutes, seconds.