Framework7 - 选择器

描述

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

使用以下应用程序的方法，您可以创建并初始化 JavaScript 方法 -

myApp.picker(parameters)

其中参数为必填对象，用于初始化选取器实例，是必填方法。

选取器参数

下表指定了选择器中的可用参数 -

序列号 参数及说明 类型 默认
1

容器

带有 CSS 选择器或 HTMLElement 的字符串，用于为内联选择器生成选择器 HTML。

 字符串或 HTMLElement -
2

输入

使用 CSS 选择器或 HTMLElement 与字符串一起放置的相关输入元素。

 字符串或 HTMLElement -
3

滚动到输入

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

 布尔值 真的
4

输入只读

用于设置指定输入​​的“只读”属性。

 布尔值 真的
5

转换为弹出框

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

 布尔值 真的
6

仅在弹出窗口上

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

 布尔值 真的
7

CSS类

对于选择器模态，您可以使用额外的 CSS 类名。

 细绳 -
8

通过外部点击关闭

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

 布尔值 错误的
9

工具栏

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

 布尔值 真的
10

工具栏关闭文本

用于完成/关闭工具栏按钮。

 细绳 '完毕'
11

工具栏模板

它是工具栏 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>
细绳 -

具体选取器参数

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

序列号 参数及说明 类型 默认
1

旋转效果

它在选择器中启用 3D 旋转效果。

 布尔值 错误的
2

动量比

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

 数字 7
3

更新动力值

用于在动量期间更新选择器和输入值。

 布尔值 错误的
4

触摸移动时更新值

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

 布尔值 真的
5

价值

数组有其初始值，并且每个数组项代表相关列的值。

 大批 -
6

格式值

该函数用于格式化输入值，它应该返回新的/格式化的字符串值。Values和displayValues是相关列的数组。

 函数（p、值、显示值） -
7

列

每个数组项代表一个具有列参数的对象。

 大批 -

选择器参数回调

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

序列号 回调和描述 类型 默认
1

改变时

每当选择器值发生变化时就会执行回调函数，并且values和displayValues都是相关列的数组。

 函数（p、值、显示值） -
2

打开时

每当选择器打开时都会执行回调函数。

 函数（p） -
3

关闭时

每当选择器关闭时都会执行回调函数。

 函数（p） -

色谱柱参数

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

序列号 参数及说明 类型 默认
1

价值观

您可以使用数组指定字符串列值。

 大批 -
2

显示值

它具有包含字符串列值的数组，并且当未指定时，它将显示值参数中的值。

 大批 -
3

CSS类

用于在列 HTML 容器上设置的CSS 类名称。

 细绳 -
4

文本对齐

它用于设置列值的文本对齐方式，可以是“左”、“中”或“右”。

 细绳 -
5

宽度

默认情况下，宽度是自动计算的。如果您需要修复选择器中的列宽，其依赖列应以px为单位。

 数字 -
6

分隔线

它用于应该是视觉分隔符的列，它没有任何值。

 布尔值 错误的
7

内容

它用于指定分隔列（divider:true）和列的内容。

 细绳 -

列回调参数

序列号 回调和描述 类型 默认
1

改变时

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

 函数（p、值、显示值） -

选择器属性

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

序列号 属性及说明
1

myPicker.params

您可以使用对象初始化传递的参数。
2

myPicker.value

每列的选定值由项目数组表示。
3

myPicker.displayValue

每列的选定显示值由项目数组表示。
4

myPicker.opened

当选择器打开时，它设置为真值。
5

myPicker.内联

当选择器内联时，它设置为真值。
6

myPicker.cols

选择器列有其自己的方法和属性。
7

myPicker.container

Dom7 实例用于 HTML 容器。

选取器方法

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

序列号 方法与说明
1

myPicker.setValue（值，持续时间）

用于设置新的选择器值。这些值位于数组中，其中每个项目代表每列的值。持续时间- 转换持续时间（以毫秒为单位）。
2

myPicker.open()

用于打开选取器。
3

myPicker.close()

用于关闭选取器。
4

myPicker.destroy()

用于销毁 Picker 实例并删除所有事件。

列属性

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

//Get first column
var col = myPicker.cols[0];
序列号 属性及说明
1

列容器

您可以使用列 HTML 容器创建一个实例。
2

列项目

您可以使用列项 HTML 元素创建实例。
3

列值

用于选择当前列值。
4

列显示值

用于选择当前显示的列值。
5

列活动索引

给出当前索引号，即选定/活动项目。

柱法

下表给出了有用的列方法 -

序列号 方法与说明
1

col.setValue(值, 持续时间)

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

col.replaceValues（值，displayValues）

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

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

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

下表指定了不同类型的选择器 -

序列号 选项卡类型和描述
1 单值选择器

它是一个功能强大的组件，允许您从列表中选择任何值。
2 两个值和 3D 旋转效果

在选择器中，您可以使用 3D 旋转效果。
3 相关值

对于指定元素，值相互依赖。
4 自定义工具栏

您可以在单个页面上使用一个或多个选择器进行自定义。
5 内联选择器/日期时间

您可以在内联选择器中选择值的数量。例如日期有日期、月份、年份，时间有小时、分钟、秒。