framework7教程

Framework7 选择器

说明

Picker 看起来像 iOS 原生选择器,它是一个强大的组件,允许您从列表中选择任何值,还用于创建自定义叠加选择器。您可以将 Picker 用作内联组件或叠加层。覆盖选择器将在平板电脑 (iPad) 上自动转换为 Popover。
使用以下 App 的方法,您可以创建和初始化 JavaScript 方法-
myApp.picker(parameters)
其中 参数是必需的对象,用于初始化picker实例,是必需的方法。

选择器参数

下表指定了选择器中的可用参数-
S.No 参数和说明 输入 默认
1
container
带有 CSS 选择器或 HTMLElement 的string,用于为内联选择器生成选择器 HTML。
string或 HTMLElement -
2
input
与CSS选择器或HTMLElementstring一起放置的相关输入元素。
string或 HTMLElement -
3
scrollToInput
每当打开选择器时,它用于滚动输入的视口(页面内容)。
boolean true
4
inputReadOnly
用于设置指定输入​​的"只读"属性。
boolean true
5
convertToPopover
用于在iPad等大屏幕上将picker modal转换为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模板,默认是HTMLstring,模板如下-
<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
在picker中开启3D旋转效果
boolean false
2
momentumRatio
当你在快速触摸和移动后释放选择器时,它会产生更多的动量。
number 7
3
updateValuesOnMomentum
用于在动量期间更新选择器和输入值。
boolean false
4
updateValuesOnTouchmove
用于在触摸移动期间更新选择器和输入值。
boolean true
5
value
array有初始值,每个array项代表相关列的值。
array -
6
formatValue
该function用于格式化输入值,它应该返回新的/格式化的string值。 displayValues 是相关列的array。
function(p, values, displayValues) -
7
cols
每个array项代表一个带有列参数的对象。
array -

选择器参数回调

下表显示了选择器中可用的回调function列表-
S.No 回调和描述 输入 默认
1
onChange
每当picker 值改变并且 values 和displayValues 是相关列的array时,回调function将被执行。
function(p, values, displayValues) -
2
onOpen
每当打开选择器时都会执行回调function。
function(p) -
3
onClose
回调function会在picker关闭时执行。
function(p) -

列参数

在配置 Picker 的时候,我们需要传入 cols 参数。它表示为array,其中每个项目都是带有列参数的对象-
S.No 参数和说明 输入 默认
1
values
您可以使用array指定string列值。
array -
2
displayValues
它有一个包含string列值的array,它将显示来自 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
每当列值发生变化时,回调function就会执行。 value 和 displayValue 代表当前列mn value 和 displayValue.
function(p, value, displayValue) -

选择器属性

Picker 变量有许多属性,如下表所示-
S.No 属性和描述
1
myPicker.params
您可以使用对象初始化传递的参数。
2
myPicker.value
每列的选定值由项目array表示。
3
myPicker.displayValue
每列选定的显示值由一个项目array表示。
4
myPicker.opened
当picker打开时,它设置为 true值。
5
myPicker.inline
当picker 为内联时,它设置为 true 值。
6
myPicker.cols
Picker 列有自己的方法和属性。
7
myPicker.container
Dom7 实例用于 HTML 容器。

选择器方法

picker 变量具有有用的方法,如下表所示-
S.No 方法和说明
1
myPicker.setValue(values, duration)
用于设置新的选择器值。值在array中,其中每个项目代表每列的 valueduration-以毫秒为单位的转换持续时间。
2
myPicker.open()
用于打开选择器。
3
myPicker.close()
用于关闭 Picker。
4
myPicker.destroy()
用于销毁 Picker 实例并删除所有事件。

列属性

myPicker.cols array中的每一列也有自己有用的属性,如下表所示-
//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 是以毫秒为单位的转换持续时间。
2
col.replaceValues(values, displayValues)
用于用新的值替换列值和显示值。
每当您将 Picker 初始化为内联 Picker 时,它都用于从其 HTML 容器访问 Picker 的实例。
var myPicker = $('.picker-inline')[0].f7Picker;
下表指定了不同类型的选择器-
S.No 标签类型和描述
1 单值选取器
这是一个强大的组件,允许您从列表中选取任何值。
2 两个值和 3D 旋转效果
在选择器中,您可以使用 3D 旋转效果。
3 依赖值
对于指定元素,值相互依赖。
4 自定义工具栏
您可以在单个页面上使用一个或多个选择器进行自定义。
5 内联选择器/日期时间
您可以在内联选择器中选择值的数量。比如日期有 日期、月份、年,时间有 小时、分钟、秒。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4