Framework7 选择器

2024 年 8 月 29 日 | 4 分钟阅读

在 Framework7 中，选择器是一个非常强大的组件，它方便您从列表中选择任何值，并且还用于创建自定义的叠加选择器。它看起来像 iOS 原生选择器。

选择器可以用作内联组件或叠加层。叠加选择器将在平板电脑 (iPad) 上自动转换为 Popover。

您可以通过使用以下语法来创建和初始化 JavaScript 方法

这里参数是必需的对象，用于初始化选择器实例，这是一个必需的方法。

选择器参数

以下是选择器中可用参数的列表

索引	参数	类型	描述
1)	container	字符串或 HTMLElement	用于为内联选择器生成选择器 HTML 的带有 CSS 选择器或 HTMLElement 的字符串。
2)	输入	字符串或 HTMLElement	与带有 CSS 选择器或 HTMLElement 的字符串关联的输入元素。
3)	scrollToInput	boolean	用于在打开选择器时滚动输入视口 (页面内容)。
4)	inputReadOnly	boolean	用于在指定的输入上设置“readonly”属性。
5)	convertToPopover	boolean	用于在 iPad 等大屏幕上将选择器模态转换为 Popover。
6)	onlyOnPopover	boolean	您可以通过启用它在 Popover 中打开选择器。
7)	cssClass	string	对于选择器模态，您可以使用其他 CSS 类名。
8)	closeByOutsideClick	boolean	您可以通过启用该方法来通过单击选择器或输入元素之外来关闭选择器。
9)	toolbar	boolean	用于启用选择器模态工具栏。
10)	toolbarCloseText	string	用于完成/关闭工具栏按钮。
11)	toolbarTemplate	string	它是工具栏 HTML 模板，默认情况下，它是一个带有以下模板的 HTML 字符串 {{closeText}}

以下是一些特定选择器参数的列表

索引	参数	类型	描述
1)	rotateEffect	boolean	它在选择器中启用 3D 旋转效果。
2)	momentumRatio	数字	快速触摸和移动后释放选择器时，它会产生更多动量。
3)	updateValuesOnMomentum	boolean	用于在动量期间更新选择器和输入值。
4)	updateValuesOnTouchmove	boolean	用于在触摸移动期间更新选择器和输入值。
5)	值	数组	数组具有其初始值，并且每个数组项代表相关列的值。
6)	formatValue	函数 (p, values, displayValues)	该函数用于格式化输入值，它应该返回新的/格式化的字符串值。 values 和 displayValues 是相关列的数组。
7)	cols	数组	每个数组项代表一个带有列参数的对象。

以下是选择器中可用回调函数的列表

索引	回调	类型	描述
1)	onChange	函数 (p, values, displayValues)	每当选择器值更改时，将执行回调函数，并且 values 和 displayValues 是相关列的数组。
2)	onOpen	函数 (p)	每当选择器打开时，将执行回调函数。
3)	onClose	函数 (p)	每当选择器关闭时，将执行回调函数。

配置选择器时，我们必须传递 cols 参数。它表示为数组，其中每个项目都是带有列参数的对象。

索引	参数	类型	描述
1)	values	数组	您可以使用数组指定字符串列值。
2)	displayValues	数组	它有一个带有字符串列值的数组，并且它将显示来自 values 参数的值，如果没有指定。
3)	cssClass	string	用于在列 HTML 容器上设置的 CSS 类名。
4)	textAlign	string	用于设置列值的文本对齐方式，它可以是“left”、“center”或“right”。
5)	宽度	数字	宽度默认情况下会自动计算。如果您需要在具有应为 px 的相关列的选择器中修复列宽。
6)	divider	boolean	用于应为可视分隔符的列，它没有任何值。
7)	内容	string	用于指定分隔符列 (divider:true) 和列内容。

以下是选择器属性的列表

以下是选择器变量的一些有用方法列表。

索引	方法	描述
1)	myPicker.setValue(values, duration)	用于设置新的选择器值。 values 在数组中，其中每个项目代表每列的值。持续时间：这是以毫秒为单位的过渡持续时间。
2)	myPicker.open()	用于打开选择器。
3)	myPicker.close()	用于关闭选择器。
4)	myPicker.destroy()	用于销毁选择器实例并删除所有事件。

主要有 5 种类型的选择器

索引	选择器	描述
1)	具有单个值的选择器	它是一个强大的组件，允许您从列表中选择任何值。
2)	两个值和 3D 旋转效果	在选择器中，您可以将其用于 3D 旋转效果。
3)	相关值	值依赖于指定元素的相互关系。
4)	自定义工具栏	您可以在单个页面上使用一个或多个选择器进行自定义。
5)	内联选择器/日期时间	您可以在内联选择器中选择多个值。例如，日期有日期、月、年，时间有小时、分钟、秒。