目录
  1. WIKI教程
  2. 学习Framework7
  3. Framework7 - Picker( Picker)

Framework7 - Picker( Picker)

描述 (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

无论何时打开选择器，它都用于滚动输入的视口（页面内容）。

booleantrue
4

inputReadOnly

用于在指定输入上设置“readonly”属性。

booleantrue
5

convertToPopover

它用于在iPad等大屏幕上将选择器模式转换为Popover。

booleantrue
6

onlyOnPopover

您可以通过启用它来打开Popover中的选择器。

booleantrue
7

cssClass

要选择模态，您可以使用其他CSS类名。

string-
8

closeByOutsideClick

您可以通过启用方法单击选择器或输入元素外部来关闭选取器。

booleanfalse
9

toolbar

它用于启用选取器模式工具栏。

booleantrue
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旋转效果。

booleanfalse
2

momentumRatio

当您在快速触摸和移动后释放拾取器时，它会产生更多动量。

number7
3

updateValuesOnMomentum

用于在动量期间更新拣货员和输入值。

booleanfalse
4

updateValuesOnTouchmove

用于在触摸移动期间更新拾取器和输入值。

booleantrue
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)-

列参数

在配置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

它用于应该是可视分割器的列，它没有任何值。

booleanfalse
7

content

它用于指定divider-column (divider:true)和列的内容。

string-

列回调参数

S.No 回调和描述 类型 默认
1

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替换为新值。

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

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

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

S.No 选项卡类型和描述
1 单值选择器

它是一个功能强大的组件，允许您从列表中选择任何值。

2 两个值和3D旋转效果

在拾取器中，您可以使用3D旋转效果。

3 依赖值

值与指定元素相互依赖。

4 自定义工具栏

您可以在单个页面上使用一个或多个选择器进行自定义。

5 内联选择器/日期时间

您可以在内联选择器中选择多个值。类似日期的date, month, year和时间包括hours, minutes, seconds.

<上一篇.Framework7 - 自动完成( Autocomplete)
Framework7 - 日历( Calendar).下一篇>
↑回到顶部↑
WIKI教程 @2018