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

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

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 内联选择器/日期时间

您可以在内联选择器中选择多个值。例如日期有日期、月份、年份,时间有小时、分钟、秒。