HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Framework7 - Picker

描述

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

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

myApp.picker(parameters)

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

选择器参数

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

S.No 参数 &描述 类型 默认
1

container

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

 字符串或 HTMLElement -
2

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 和 displayValues 是相关列的数组。

 function (p, values, displayValues) -
2

onOpen

每当选择器打开时，将执行回调函数。

 function (p) -
3

onClose

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

 function (p) -

列参数

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

S.No 参数 &描述 类型 默认
1

values

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

 array -
2

displayValues

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

 array -
3

cssClass

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

 string -
4

textAlign

用于设置列值的文本对齐方式，可以是 "left"、"center"或"right"。

 string -
5

width

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

 number -
6

divider

它用于应为可视分隔符的列，它没有任何值。

 boolean false
7

content

它用于指定分隔符列 (divider:true) 以及列的内容。

 string -

列回调参数

S.No 回调和说明 类型 默认
1

onChange

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

 function (p, value, displayValue) -

Picker 属性

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

S.No 属性 &描述
1

myPicker.params

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

myPicker.value

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

myPicker.displayValue

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

myPicker.opened

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

myPicker.inline

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

myPicker.cols

Picker 列有自己的方法和属性。
7

myPicker.container

Dom7 实例用于 HTML 容器。

Picker 方法

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

S.No 方法和说明
1

myPicker.setValue(values, duration)

用于设置新的选择器值。值位于数组中，其中每个项目代表每列的值。 duration - 以毫秒为单位的过渡持续时间。
2

myPicker.open()

用于打开 Picker。
3

myPicker.close()

用于关闭 Picker。
4

myPicker.destroy()

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

列属性

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

//获取第一列
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 是以毫秒为单位的过渡持续时间。
2

col.replaceValues(values, displayValues)

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

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

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

下表列出了不同类型的选择器 −

S.No 标签类型 &描述
1 单值选择器

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

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

值彼此依赖，以实现指定的元素。
4 自定义工具栏

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

您可以在内联选择器中选择多个值。例如日期有日期、月份、年份，时间有小时、分钟、秒。
❮ 上一节 下一节 ❯