Framework7学习笔记（二）：组件

为F7应用添加导航栏和工具栏之前，需要决定使用何种导航/工具栏布局。F7支持三种导航/工具栏布局。

这是最少使用的一种布局，使用该布局时，导航/工具栏随着页面滚动，它们仅仅是页面的一部分，每个页面拥有自己的导航/工具栏：

与静态布局类似，每个页面拥有自己的导航/工具栏，但是导航/工具栏不随页面滚动，它们分别固定在顶部/底部，始终可见。启用固定布局很简单，只需要在页面元素上添加样式类：

这是最常使用的一种方式，一个视图中的所有页面共享导航/工具栏。该布局支持动态导航栏（Dynamic Navbar）：

F7支持在一个视图内混合使用多种布局方式。例如你可以使用贯穿的导航栏 + 固定的工具栏：

你也可以不使用导航栏和（或）工具栏，只要不声明它们、同时不在page/pages/view元素上添加冲突的样式类：navbar-fixed、navbar-through、toolbar-fixed、 toolbar-through即可。

所谓导航栏，是位于屏幕顶部的，包含页面标题、导航元素的一个区域。导航栏分为三个部分（左、中、右），这三个部分都可以包含任意HTML，但是F7建议这样使用导航栏： 

1. 左侧部分：用于放置返回链接，可以是图标或者文本
2. 中间部分：显示页面标题
3. 右侧部分：类似于左侧，放置按钮或链接

导航栏内部的结构很简单且自描述：

可以在导航栏中添加多种链接：

链接类型	说明与示例
文本链接	XHTML 1 2 3 4 5 6 7 8 <div class="navbar">     <div class="navbar-inner">         <!-- 要在左右侧添加链接，仅需要为a元素添加link类 -->         <div class="left"><a href="#" class="link">左侧文本链接</a></div>         <div class="center">Center</div>         <div class="right"><a href="#" class="link">右侧文本链接</a></div>     </div> </div>
多个链接	XHTML 1 2 3 4 5 <!-- 每个区域都可以包含多个链接 --> <div class="left">     <a href="#" class="link">左侧文本链接1</a>     <a href="#" class="link">左侧文本链接2</a> </div>
图标+文本链接	XHTML 1 2 3 4 5 6 7 8 <div class="left">     <a href="#" class="link">         <!-- 用样式类icon标注图标，该样式类定义了背景图片 -->         <i class="icon icon-back"></i>         <!-- 使用图标+文本链接时，必须把文本包装在span元素内 -->         <span>Back</span>     </a> </div>
图标链接	XHTML 1 2 3 4 5 6 <div class="left">     <!-- 对于只有图标的链接，需要添加icon-only类，该类确保链接占据44x44像素 -->     <a href="#" class="link icon-only">         <i class="icon icon-back"></i>     </a> </div>

对于已初始化的视图，我们可以用JavaScript API操控其导航栏：

方法	说明
app.hideNavbar(navbar)	隐藏或显示指定的导航栏。navbar为代表目标导航栏的HTMLElement或者CSS选择器（字符串）
app.showNavbar(navbar)
view.hideNavbar()	隐藏或显示视图view的导航栏。示例： JavaScript 1 2 3 4 5 6 7 8 9 var app = new Framework7(); var $ = Framework7.$; var mainView = app.addView('.view-main'); $('.hide-navbar').on('click', function () {     mainView.hideNavbar(); }); $('.show-navbar').on('click', function () {     mainView.showNavbar(); });
view.showNavbar()
view.sizeNavbars(viewContainer)	仅iOS主题。重新计算导航栏的位置。示例： app.sizeNavbars('.view-main')

使用贯穿布局时，F7允许对某些Ajax页面自动隐藏/显示导航栏：

注意动态导航栏仅适用于iOS主题 + 贯穿布局。所谓动态导航栏，在页面切换时，其内容具有滑动和淡入淡出效果。

动态导航栏的内部布局和普通导航栏没太大区别，只是你可以为导航栏的左中右三个部分添加额外的样式类。默认的，F7为这三个部分添加淡入淡出效果，如果要启用滑动效果，你可以添加样式类：

设置应用初始化参数 animateNavBackIcon: true 可以为后退按钮添加更多的动画效果，从而更像iOS 7的风格。

F7为动态导航栏添加了几种事件，这些事件的源（Target） 都是 <div class="navbar-inner"> ：

事件	说明
navbarBeforeInit	插入一个新的导航栏到DOM时，触发该事件
navbarInit	初始化一个导航栏后，触发该事件
navbarReinit	当缓存的导航栏变得再次可见时，触发该事件
navbarBeforeRemove	当导航栏即将从DOM中移除时，触发该事件

下面的代码演示了该事件的使用：

当你需要在导航栏添加额外的元素时，可以使用子导航栏。当导航栏隐藏时，子导航栏仍然保持可见。 

在线演示：http://framework7.taobao.org/docs-demos/subnavbar.html

工具栏是屏幕上的一个固定区域，可以包含导航元素。不像导航栏，工具栏不包含任何部分，内部可以直接是若干链接。

默认的，工具栏内的元素均匀的分布在工具栏中。 

以下方法可用于操控已初始化视图中的工具栏：

方法	说明
app.hideToolbar(toolbar)	隐藏或者显示指定的工具栏。 toolbar：目标工具栏对应的HTMLElement或者String（CSS选择器）
app.showToolbar(toolbar)
view.hideToolbar()	隐藏或者显示当前视图的工具栏
view.showToolbar()

如果某个Ajax页面不需要显示工具栏，可以在页面上添加样式类：

仅用于Material主题，对于iOS主题工具栏默认就在底部。

Material主题常常把工具栏/页签栏置于屏幕上面，导航栏下面。如果要改变此行为，可以为工具栏添加额外的样式类：

页签栏只是工具栏的特例，它包含图标（或者图标+文本），而不仅仅是文本。 

与工具栏类似，只是多一个样式类声明：

默认的，页签栏内的元素（链接）均匀的分布在页签栏中。但是要注意以下两点：

1. 在iPhone中，每个元素的大小一致，为屏幕宽度/元素个数
2. 在iPad中，所有元素的被居中显示，元素最小宽度105px

类似的，为图标添加一个兄弟元素，可以显示文本标签：

当页签栏中的元素非常多，屏幕宽度不足以显示时，应该使用可滚动页签栏，当手指划过页签栏时，会自动滚动以显示不可见元素：

方法	说明
app.hideToolbar(toolbar)	这两个方法同样适用于页签栏
app.showToolbar(toolbar)

如果某个Ajax页面不需要显示页签栏，可以在页面上添加样式类：

F7支持当页面向下滚动时，自动隐藏导航/工具栏。

要全局性的启用该功能，可以配置以下应用初始化参数：

1. hideNavbarOnPageScroll：滚动时隐藏导航栏
2. hideToolbarOnPageScroll：滚动时隐藏工具栏
3. hideTabbarOnPageScroll：滚动时隐藏页签栏
4. showBarsOnPageScrollEnd ：滚动到页面底部时显示所有栏

要针对某些特定页面启用该功能，可以在 <div class="page-content"> 元素上添加以下样式类：

1. hide-bars-on-scroll
2.  hide-navbar-on-scroll 
3. hide-toolbar-on-scroll 
4. hide-tabbar-on-scroll 

在全局启用时，可以使用下面的样式类，针对特定页面禁用此功能：

1. keep-bars-on-scroll
2. keep-navbar-on-scroll
3. keep-toolbar-on-scroll
4. keep-tabbar-on-scroll 

搜索栏可以对列表视图（List View）执行搜索，或者作为自定义搜索实现的视觉元素。

在线演示：http://framework7.taobao.org/docs-demos/searchbar.html

搜索栏应该放置在 .page 和 .page-content 元素之间：

除了搜索栏布局，我们还需要调用API初始化它：

你也可以通过HTML初始化搜索栏：

通过下面的方式可以获得DOM关联的搜索栏实例：

参数	类型和默认值	说明
searchList	string / HTMLElement	被搜索的列表块（list block），HTMLElement或者CSS选择器
searchIn	string = '.item-title'	CSS选择器，指定列表视图元素的字段，搜索在该字段上进行，通常我们通过元素的标题搜索（.item-title）
found	string / HTMLElement	搜索结果可用时显示的元素的CSS选择器或者DOM，如果不指定，默认使用页面内的.searchbar-found元素
notFound	string / HTMLElement	类似上面，搜索结果不可用时显示的元素，默认使用页面内的.searchbar-not-found元素
overlay	string / HTMLElement	搜索栏overlay元素，默认使用页面内的.searchbar-overlay元素
ignore	string = '.searchbar-ignore'	CSS选择器，哪些元素被搜索栏忽略，总是显示在搜索结果中
customSearch	boolean = false	如果设置为true，则搜索栏不去搜索searchList指定的列表块。你可以定制自己的搜索逻辑，并手工处理数据展示
hideDividers	boolean = true	如果列表分隔器没有匹配的条目，则隐藏分隔器
hideGroups	boolean = true	如果组内没有匹配的条目，则隐藏组标题
onSearch	function (s)	搜索时（输入值改变）触发此回调
onEnable	function (s)	当搜索栏被启用时，触发此回调
onDisable	function (s)	当搜索栏被禁用（例如点击取消按钮、或者触碰searchbar-overlay元素）时，触发此回调
onClear	function (s)	当用户点击了搜索栏的clear元素时触发此回调

方法/属性/事件	说明
params	搜索栏的所有初始化参数
query	当前搜索条件，即输入框的内容
searchList	搜索列表块对应的DOM元素
container	搜索栏容器DOM元素
input	搜索输入框DOM元素
active	boolean，当前搜索框是否处于激活状态
search(query)	依据入参条件执行搜索
enable()	启用搜索栏
disable()	禁用搜索栏
clear()	清空查询条件并更新搜素结果
destroy()	销毁该搜索栏实例
⚡search	这些事件的target都是搜索栏关联的 <div class="list-block"> 元素。分别在以下时机触发： 搜索框的值改变时 点击搜索栏的clear元素，清空搜索框时 搜索栏被激活时 搜索栏去激活时
⚡clearSearch
⚡enableSearch
⚡disableSearch

 状态栏是指设备屏幕顶端的一个窄条，包含信标、电量、时间等信息。F7框架中和状态栏相关的主题是状态栏overlay。

iOS7+系统允许你创建全屏应用程序，但是状态栏可能覆盖应用程序的内容。F7能够处理该问题，当应用程序处于全屏状态时，F7会自动检测到并添加 with-statusbar-overlay 样式类到 <html> 元素上，当应用程序退出全屏时，则去掉该样式类。

该样式类自动在应用程序顶端添加20像素的补白，从而防止状态栏覆盖掉用程序内容。

你可以控制全屏应用状态栏的背景色：

.statusbar-overlay 这个div总是固定在屏幕顶部，默认隐藏。当应用程序进入全屏状态、且 <html> 元素上具有 with-statusbar-overlay 样式时自动显示。

注意：

1. Home界面中的Web应用，其状态栏总是白色，无法改变
2. Apache Cordova 应用的状态栏默认总是黑色，F7无法修改。你可以使用Cordova插件 cordova-plugin-statusbar 来定制状态栏颜色

侧边栏是从左侧或者右侧滑动进入屏幕，并且覆盖在页面主体内容上方的组件。

事件	说明
⚡open	这些事件的target都是 <div class="panel"> 元素。分别在以下时机触发： 面板打开动画开始时 面板打开动画完成时 面板关闭动画开始时 面板关闭动画完成时
⚡opened
⚡close
⚡closed

F7支持通过滑动手势打开面板，但是只有左侧或者右侧面板中的一个可以启用该手势：

其它与面板相关的应用初始化参数包括：swipePanelCloseOpposite、 swipePanelOnlyClose、swipePanelActiveArea、swipePanelNoFollow、swipePanelThreshold。

当面板处于打开状态时，F7会给 <body> 元素添加额外的样式类： with-panel-[position]-[effect] ：

1. position区分左右面板，取值left或right
2. effect表示面板打开效果，取值reveal或cover

下面的代码测试当前是否以覆盖方式打开了左侧面板：

内容块主要用于为文本内容添加额外的格式或边距： 

使用 F7的布局网格，我们可以灵活的在页面中定位自己的组件。

用于指定网格的单元格的宽度的样式类包括：

1. col-* ：其中*为5/10/15...90/95.100，数字代表占据的相对宽度。设置样式类为col-auto的单元格，平均分配剩余的宽度
2. tablet-* ：与上面类似，用于平板类型（窗口宽度大于768像素时）

默认情况下，F7没有给单元格添加任何样式，可以参考如下的CSS语法统一添加：

 这一大类的F7组件都在z-index方向覆盖在应用主体内容之上，它们都属于临时视图（Temporary Views）的一部分。

模态是一系列包含了简短内容的小面板，类似于居中于屏幕的弹出窗口。模态通常用于向用户提问，或者给用户发出通知。

F7预定义了一些常用的模态组件，例如警告框、确认框等。这些模态组件的标题、按钮文本的默认值可以通过modalTitle、modalPreloaderTitle 、modalButtonOk、modalButtonCancel 等应用初始化参数修改。

组件	说明
信息框（Alert）	类似于window.alert()，可以具有标题、文本、点击后的回调。函数签名： JavaScript 1 2 3 4 5 6 7 /** * @param text 信息内容 * @param title 可选的标题 * @param callbackOk 点击OK按钮后执行的回调函数 * @return 动态创建的模态HTML元素 */ app.alert(text, [title, callbackOk]);
确认框（Confirm）	与信息框类似，但是具有确定、取消两个按钮，点击后可以执行不同的回调。函数签名： JavaScript 1 2 3 4 5 6 7 /** * @param text 提示内容 * @param title 提示标题 * @param callbackOk 点击OK按钮时执行的回调 * @param callbackCancel 点击Cancel按钮时执行的回调 */ app.confirm(text, [title, callbackOk, callbackCancel]);
提示框（Prompt）	与确认框类似，但是还让用户输入一些文本。函数签名： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 /** * @param text 提示内容 * @param title 提示标题 * @param callbackOk 点击OK按钮时执行的回调 * @param callbackCancel 点击Cancel按钮时执行的回调 */ app.prompt(text, [title, callbackOk, callbackCancel]); /** * 上面两个回调函数的签名 * @param value 用户在文本框输入的值 */ function callback(value);
登录和密码框	可以进行用户身份验证的模态窗口。函数签名： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 /** * @param text 登录框内容 * @param title 登录框标题 * @param callbackOk 点击OK按钮时执行的回调 * @param callbackCancel 点击Cancel按钮时执行的回调 */ app.modalLogin( text, [ title, callbackOk, callbackCancel ] ); /** * 上述两个回调函数的签名 * @param username 用户输入的用户名 * @param password 用户输入的密码 */ function callback(username, password);   /** * @param text 密码框内容 * @param title 密码框标题 * @param callbackOk 点击OK按钮时执行的回调 * @param callbackCancel 点击Cancel按钮时执行的回调 */ app.modalPassword( text, [ title, callbackOk, callbackCancel ] ); /** * 上述两个回调函数的签名 * @param password 用户输入的密码 */ function callback(password);
预加载器（Preloader）	用于提示用户：由于某些后台操作（例如XHR）正在执行，应用需要阻塞用户操作。 iOS主题下的默认UI效果是：旋转菊花 + 文本。 F7提供了两个函数来操控预加载器： JavaScript 1 2 3 4 5 6 7 8 9 /** * 显示预加载器 * @param title 预加载标题，默认从应用初始化参数modalPreloaderTitle中获得 */ app.showPreloader([title]); /** * 隐藏预加载器 */ app.hidePreloader();
指示器（Indicator）	和预加载类似，但是UI只有一个旋转菊花图标，没有文本。F7提供两个函数来操控指示器： JavaScript 1 2 app.showIndicator();// 显示指示器 app.hideIndicator();// 隐藏指示器

上表中所有预定义模态组件，实际上都属于“快捷方式”，它们最终都是调用下面的函数实现功能的： 

定制的模块组件的内容可以相当丰富，下面是两个例子：

参数	类型与默认值	说明
title	string	可选的模态组件标题，可以是HTML片段
text	string	可选的模态组件文本，可以是HTML片段
afterText	string	可选的，在text之后展示的额外文本，可以是HTML片段
buttons	Button[]	模态按钮的数组，每个元素均是如下格式的对象： JavaScript 1 2 3 4 5 6 7 8 9 10 {     //按钮的文本，可以是HTML     string text;     //是否用粗体显示按钮文本     boolean bold = false;     //点击该按钮后，模态组件是否自动关闭     boolean close = true;     //点击该按钮时执行的回调     function onClick(); }
verticalButtons	boolean = false	是否纵向排列模态按钮
onClick	function(modelEl, index)	用户点击 任何模态按钮后执行的函数： modelEl 模态窗口对应的HTMLElement index 被点击按钮的索引

方法/事件	说明
⚡open	这些事件的target均为 <div class="modal"> 元素，分别在以下时机触发： 模态打开动画开始时 模态打开动画结束时 模态关闭动画开始时 模态关闭动画结束时
⚡opened
⚡close
⚡closed

通过传递应用初始化参数 modalTemplate ，可以为模态组件定制HTML模板， 该参数必须是Template7模板，下面是一个例子：

这类弹窗覆盖F7应用的主体内容上面，默认从屏幕底部滑动进入。在手机上具有全屏效果，在平板上默认630像素宽高。

方法/事件	说明
⚡open	这些事件的target均为 <div class="popup"> 元素，分别在以下时机触发： Popup弹窗打开动画开始时 Popup弹窗打开动画结束时 Popup弹窗关闭动画开始时 Popup弹窗关闭动画结束时
⚡opened
⚡close
⚡closed

F7提供了一个动态创建、打开Popup弹窗的函数：

下面是一个例子：

Popover类似于ExtJS的Tips，是一个展示临时信息的较小的弹出窗口。当用户触碰空白处时，Popover自动关闭。Popover默认宽度是320px。

在小屏幕上，不建议使用Popover，最好使用操作列表（Action Sheet）代替。

通过HTML打开的Popover，其显示位置会自动计算（在打开Popover的元素的周围），以确保正确显示。

和Popover类似，Popover也可以动态创建和展示： 

与Popup类似，事件的Target是 <div class="popover"> 元素。

操作列表通常表现为从屏幕底部滑动进入的、包含若干纵向排列按钮的弹窗。操作列表可以把按钮分成若干组。可以通过操作列表，让用户确认潜在危险的操作。

不建议在大屏幕（平板）上使用操作列表，最好用Popover代替。

操作列表属于动态组件，只能通过JavaScript创建和打开：

上述groups、buttons的最内层元素是按钮的配置对象： 

参数	类型和默认值	说明
text	string	按钮的文本，可以是HTML
bold	boolean = false	可选，设置按钮文本为粗体
color	string	可选，按钮的文字颜色，可以是10种内置颜色的英文名称
bg	string	可选，按钮的北京颜色 ，可以是10种内置颜色的英文名称
label	boolean = true	如果设置为true，则当前项作为按钮组的标题，而不是按钮
disabled	boolean = false	设置为true则按钮被标记为禁用
onClick	function()	点击按钮后，执行的回调

由于屏幕大小的原因，F7不建议：在手机上使用Popover；或者在平板上使用Action Sheet。为了让单份代码能够同时适用手机和平板，F7提供了操作列表到Popover的转换机制：

默认的，操作列表在以下情况下自动关闭：

1. 当其中某个按钮被点击时
2. 当触碰操作列表外部的屏幕空间时（可通过应用初始化参数modalActionsCloseByOutside定制） 

 如果要手工关闭操作列表，可以调用： app.closeModal(actionSheet) ，该方法前面的章节已有说明。

与Popup、Popover类似，操作列表具有4个相关事件，这些事件的Target均为 <div class="actions-modal"> 元素。

通过传递应用初始化参数 modalActionsTemplate ，可以为操作列表定制HTML模板， 该参数必须是Template7模板，下面的模板展现了操作列表的默认布局：

如果你使用操作列表到Popover的转换，则还可以传递应用初始化参数 modalActionsToPopoverTemplate  ，从而定制目标Popover的HTML模板，下面是默认的模板：

大部分应用程序都有登录功能， 因此F7内置了登录屏幕组件。

HTML方式：

JavaScript方式：

与Popup、Popover、ActionSheet类似，登录屏幕具有4个相关事件，这些事件的Target均为 <div class="login-screen"> 元素。 

某些应用要求先登录后使用，我们可以为登录屏幕添加 modal-in 类，这样F7应用加载后，立即显示登录屏幕：

这是一种特殊的Overlay组件，可以用于实现定制的选取器。其内容不受限制，UI默认表现为从屏幕底部滑入的弹窗，右上侧有一个关闭按钮，类似于手机虚拟键盘。

HTML方式：

JavaScript方式： 

与Popup、Popover、ActionSheet、登录屏幕类似，模态选取器具有4个相关事件，这些事件的Target均为 <div class="picker-modal"> 元素。 

F7自带了基于SVG和CSS动画的的预加载提示器，可以随意的放大缩小，其UI效果是旋转菊花。预加载指示器具有两个版本，分别用于浅色、深色背景。

以模态方式使用预加载指示器，可以通过上一章提到的“预加载器”、“指示器”。

除了预加载指示器以外，F7还提供另外一种用于提示“正在处理”活动的组件——进度条。进度条分为确定的（Determinate，显示实际进度）、无限的（Infinite）两种。

列表视图是多用途、强大的UI组件，在iOS应用中经常可以看到。列表视图在一个可滚动的区域内显示多行数据，可选的，它讲数据分为若干组/段。我们可以用列表视图来：

1. 在层次型数据结构（树形）内进行导航
2. 展现列表中的数据、选项
3. 显示详细信息

 如果li元素内没有其它内容，你可以把item-content类标注到li元素上，少写一个div：

很多时候需要在点击列表条目后，链接到其它页面，这时需要为 <div class="item-content"> 添加额外的包装元素：

可以插入类似下面的li元素，将列表分为两个部分：

可以将不同的列表元素进行分组：

列表块可以是Inset（非全宽度、圆角矩形边框）的：

该组件是分组列表的特例，用于显示联系人的列表，其布局如下：

该组件是列表视图的扩展，用于显示更复杂的数据，其布局如下：

该组件是列表视图的扩展，支持滑动手势（例如滑动以删除， swipe-to-delete），滑动后可以显示针对列表元素的隐藏按钮。 可滑动列表的布局如下：

F7对滑动删除这一经常使用的特性内置了支持，你只需要在操作集中增加 <a class="swipeout-delete"> 按钮即可。

F7支持当滑动距离过长时，自动执行：

1. 向左长滑时，自动执行右侧操作集的最后一个按钮上的动作
2. 向右长滑时，自动执行左侧操作集的第一个按钮上的动作

启用长滑时，F7通过脚本触发相应按钮的click事件。在长滑执行期间，目标按钮会添加额外的 swipeout-overswipe-active 样式类。

启用长滑的示例代码如下：

方法/属性/事件	说明
app.swipeoutOpen()	JavaScript 1 2 3 4 5 6 7 /** * 打开（滑动动画）并显示目标列表条目的操作集 * @param el 列表条目的HTMLElement（li）或CSS选择器 * @param direction 显示左侧还是右侧的操作集，left/right * @param callback 滑动动画执行完毕时执行的回调 */ function swipeoutOpen( el, direction, callback );
app.swipeoutClose()	JavaScript 1 2 3 4 5 6 /** * 关闭（滑动动画）目标列表条目并隐藏操作集 * @param el 列表条目的HTMLElement（li）或CSS选择器 * @param callback 滑动动画执行完毕时执行的回调 */ function swipeoutClose( el, callback );
app.swipeoutDelete()	JavaScript 1 2 3 4 5 6 /** * 滑动并删除目标列表条目 * @param el 列表条目的HTMLElement（li）或CSS选择器 * @param callback 动画执行完毕，即将把li元素从DOM中移除前执行的回调 */ function swipeoutDelete( el, callback );
app.swipeoutOpenedEl	该属性指向当前处于打开状态的列表条目的HTMLElement
⚡swipeout	这些事件的Target都是 <li class="swipeout"> 元素 swipeout：手指滑动列表条目的过程时触发， event.detail.progress 属性存放当前滑动进度的百分比值 open：打开条目时，滑动动画开始时触发 opened：打开条目时，滑动动画结束时触发 close：关闭条目时，滑动动画开始时触发 closed：关闭条目时，滑动动画结束时触发 deleted：删除条目时，滑动动画结束后，即将从DOM中删除li元素前触发
⚡open
⚡opened
⚡close
⚡closed
⚡delete
⚡deleted

该组件是列表视图的扩展，支持调整条目的顺序，其布局如下：

通过HTML：

通过JavaScript：

事件	说明
⚡open	这两个事件的Target均为 <div class="list-block sortable"> 元素。分别在启用、禁用可排序功能时触发
⚡close
⚡sort	该事件的Target为 <li> ，当用户释放拖拽小图标时触发

使用虚列表，我们可以在不影响性能的前提下展现具有大量元素的列表。虚列表和搜索栏、无限滚动、下拉刷新、滑动删除等F7组件完全兼容 。

需要调用JavaScript API来初始化虚列表的内容：

注意列表块元素在此时必须已经存在于DOM中，如果当前不是首页，你应当在pageInit事件内初始化虚列表。 

参数	类型和默认值	说明
items	array	列表条目的数组。不使用模板时，其元素是HTML片段；使用模板时，其元素一般是纯数据（JSON对象）
rowsBefore	number	在当前屏幕滚动位置之前（即屏幕底部）渲染的条目的数量，默认是单屏可容纳行数的2倍
rowsAfter	number	在当前屏幕滚动位置之后渲染的条目的数量，默认是单屏可容纳行数的1倍
cols	number = 1	每行显示的条目数量，当使用动态高度（height参数为函数）的虚列表时，此选项不兼容
height	number = 44 / function(item)	每个条目的高度，如果指定函数，则高度为函数的返回值 注意，该参数并不会设置条目的高度样式
template	string / function	Template7字符串模板或者Template已编译模板（函数形式），用来渲染单个条目。该目标必须包含条目的完整布局，包括li元素
renderItem	function(index, item)	该函数可以代替template来渲染每个条目
dynamicHeightBufferSize	number = 1	用于动态高度列表，控制缓冲大小（buffer size）
cache	boolean = true	是否启用已渲染条目的DOM缓存。如果列表条目中包含用户交互元素（按钮、表单元素等）或者列表条目可能被修改，可以启用
updatableScroll	boolean	在滚动时，设备是否更新、处理滚动事件。默认对于所有iOS 8-为fasle
showFilteredItemsOnly	boolean = false	是否仅显示 filter() 过滤后的元素
searchByItem	function(query, index, item)	搜索栏使用的搜索判断函数，入参包括查询条件、待判断条目及其索引。如果条目匹配搜索，则该函数应当返回true
searchAll	function(query, items)	搜索栏使用的搜索函数，你必须遍历items，并返回匹配的item数组
onItemBeforeInsert	function(list, item)	回调，条目被插入到虚拟文档片段（virtual document fragment）中时调用 文档片段相当于包含了本次待渲染的列表条目的临时DOM，下同
onBeforeClear	function(list, fragment)	回调，当前DOM列表将被移除前调用
onItemsBeforeInsert	function(list, fragment)	回调，当前DOM列表将被移除后，新的文档片段被插入前调研与
onItemsAfterInsert	function(list, fragment)	回调，新的文档片段被插入后调用

方法/属性	说明
items	虚列表包含的条目
filteredItems	过滤后的条目
domCache	条目的DOM缓存
params	所有初始化参数
listBlock	list-block的Dom7元素实例
pageContent	page-content的Dom7元素实例
currentFromIndex	当前正在渲染的第一个条目的索引
currentToIndex	当前正在渲染的最后一个条目的索引
reachEnd	如果当前已经渲染了最后一个条目，则为true
filterItems(indexes)	仅显示indexes数组中包含的条目
resetFilter()	禁用过滤器，显示全部条目
appendItem(item)	添加条目到虚列表的尾部
appendItems(items)
prependItem(item)	添加条目到虚列表的头部
prependItems(items)
replaceItem(index, items)	从指定索引开始替换条目
replaceAllItems(items)	替换全部条目
moveItem(oldIdx, newIdx)	将虚拟条目从oldIndex移动到newIdx
insertItemBefore(index, item)	在指定索引前面插入元素
deleteItem(index)	删除指定索引上的元素
deleteItems(indexes)
deleteAllItems()	删除全部元素
clearCache()	清空DOM缓存
destroy()	销毁虚列表的实例，解除所有事件注册
update()	更新虚列表，重新计算列表的size、重新渲染虚列表
scrollToItem(index)	滚动虚拟列表到指定的索引

 注意，上述添加、删除、改变列表元素的方法，其操作结果会立即反应到视图上。

通用的手风琴布局如下：

手风琴布局实质上是多个联动的可折叠条目的集合 ，可收折叠的手风琴条目可以脱离 accordion-list 单独使用：

可以把手风琴布局和列表视图结合起来使用：

 可以通过如下方式修改手风琴条目展开、折叠时的样式：

以下4个事件的Target均为 <div class="accordion-item"> 。触发时机分别为：

1. open 条目打开动画开始时
2. opened 条目打开动画结束时
3. close 条目关闭动画开始时
4. closed 条目关闭动画结束时

类似于列表视图，卡片也是包含和组织相关信息的常用方式。单张卡片常常包含一些相关的图片、文字、连接信息，作为更详细信息的入口，本站的首页就是卡片布局典型的例子。F7完整的支持卡片布局。

注意，卡片头、脚使用flexbox布局（display:flex），在垂直方向默认居中对齐。如果你需要顶部/底部对齐，可以：

 该组件只适用于Material主题。

Chips在一个很小的内联块中显示复杂的信息，其中可以包含照片、小标题、文本。在视觉效果上，Chip表现为圆角小矩形：

F7框架包含了大量开箱即用的按钮组件，只需要把合适的样式类添加到链接/按钮/提交input元素上即可。

F7中的按钮默认均为 display:block ，且占据父容器100%宽度。

普通按钮，默认具有蓝色边框和蓝色文字样式：

激活态按钮，默认具有蓝色背景和白色文字样式：

圆角按钮，具有更加圆润的边框：

大按钮，比普通按钮更高：

按钮行，其中每个按钮具有相同的宽度，没有边距：

填充按钮，看上去和激活态按钮类似，但是点击/触碰时有额外的样式效果：

彩色按钮：

由按钮组成的列表视图：

使用网格布局对按钮进行排版，这样可以让按钮之间有边距： 

普通按钮，与iOS主题类似，但是没有边框：

按钮行，与iOS主题类似，但是没有边框：

浮雕效果按钮（Raised Buttons） ，具有阴影效果：

填充按钮，默认具有蓝色背景和白色文字：

为Material波纹效果（从触碰点向周围扩散的动画）指定颜色：

大按钮、列表块按钮、彩色按钮与iOS主题类似。 

浮动动作按钮（FAB）仅适用于Material主题，在视觉效果上，它表现为浮动的（不随页面滚动，通常位于屏幕右下角）、圆形的的按钮 。触碰后，FAB可能会：

1. 变形：转换为一个Popover 
2. 快速拨号：弹出一组相关的按钮

如果你需要在触碰FAB后显示一个Popover，可以：

可以在触碰FAB后，向上动画弹出一组按钮。再次触碰FAB，则按相反的动画隐藏这些按钮。你应当保证按钮组元素的数量在3-6之间：

F7支持大量的表单元素类型，表单元素通常在列表视图中组织。

可以放在 <div class="item-input"> 内部的表单元素如下表：

元素类型	说明
各种文本元素	支持text、password、email、url、tel、date、number、datetime-local等类型： XHTML 1 2 3 <div class="item-input">     <input type="text"> </div>
选择菜单	XHTML 1 2 3 <div class="item-input">     <select></select> </div>
多行文本	XHTML 1 2 3 <div class="item-input">     <textarea></textarea> </div>  注意，作为列表条目时，需要额外的对齐属性： XHTML 1 2 3 4 5 6 7 8 9 10 <li class="align-top"><!-- 必须顶部对齐 -->     <div class="item-content">         <div class="item-inner">             <div class="item-title label"></div>             <div class="item-input">                 <textarea></textarea>             </div>         </div>     </div> </li>
可缩放多行文本	文本框的大小会随着其内容自动缩放： XHTML 1 2 3 <div class="item-input">     <textarea class="resizable"></textarea> </div>
开关	需要额外的包装元素： XHTML 1 2 3 4 5 6 <div class="item-input">     <label class="label-switch"><!-- 额外的包装 -->         <input type="checkbox">         <div class="checkbox"></div>     </label> </div>
滑块	可以选择一个范围的值，需要额外的包装元素： XHTML 1 2 3 4 5 <div class="item-input">     <div class="range-slider"><!-- 额外的包装 -->         <input type="range" min="0" max="100" step="0.1">     </div> </div>

这是一个列表视图的扩展，可用于创建复选框/单选框的分组。

Material主题支持额外的图标，iOS主题则不支持图标：

复选框组、单选框组可以和媒体列表视图一起工作，展现更丰富的内容。下面是一个示例：

使用智能选择，并结合复选框组/单选框组，你可以轻易的把常规的下拉菜单（select） 转换为动态页面。在Native的iOS应用中，经常可以看到类似的UI特性。

注意智能选择只能在已初始化的视图中使用。 

默认的，智能选择子页面的标题与父页面一致，返回按钮的文本默认则由应用初始化参数 smartSelectBackText  指定。这些文本都可以定制：

F7支持以Popup的方式打开智能选择组件，设置应用初始化参数 smartSelectOpenIn:'popup'  则默认所有智能选择均以Popup的方式打开。下面演示如何指定单个智能选择以Popup方式打开：

F7还支持在选取器模态窗口，而不是页面中打开智能选择组件，设置应用初始化参数 smartSelectOpenIn:'picker'  则默认所有智能选择均以Picker的方式打开。下面演示如何指定单个智能选择以Picker方式打开：

如果选项特别多（例如1000个），则可以使用虚列表：

可以为智能选择页面、Popup设置主题：

方法	说明
app.smartSelectOpen()	JavaScript 1 2 3 4 5 /** * 打开一个智能选择页面/弹窗/选取器 * @param smartSelect 目标.smart-select元素对应的HTMLElement或者CSS选择器 */ function smartSelectOpen(smartSelect);
app.smartSelectAddOption()	JavaScript 1 2 3 4 5 6 7 /** * 动态的为智能选择添加选项 * @param select HTML或者CSS选择器，对应select或者optgroup元素 * @param optionHTML 被插入的选项的完整HTML * @param index 新选项插入的索引，如果不指定则插入到最后 */ function smartSelectAddOption(select, optionHTML, index)

F7支持为任何元素添加“禁用”样式：

1. disabled样式类：可以为任何元素添加禁用样式
2. disabled属性：可以为表单元素添加禁用样式

被禁用的元素具有较低的不透明度，而且不接受任何touch/click事件。

F7提供了一些便利的方法，用来收集表单数据为JSON，或者读取JSON并设置表单元素的值。

方法	说明
app.formToJSON()	JavaScript 1 2 3 4 5 6 /** * 收集表单字段的值，并组成一个JSON对象 * @param form 表单元素的HTMLElement或者CSS选择器 * @returns 返回JSON对象 */ function formToJSON( form );  注意： 只有具有name属性的input/select/textarea等元素，其值才会包含在结果JSON。name属性作为JSON字段的名称 复选框checkbox和多选的select，其值存储为数组
app.formFromJSON()	JavaScript 1 2 3 4 5 6 /** * 使用JSON填充表单 * @param form 目标表单的HTMLElement或者CSS选择器 * @param formData 用来填充的JSON */ function formFromJSON(form, formData);

F7支持自动存储/加载表单数据，即使是Ajax页面也支持。要启用本地存储，只需要：

1. 为表单添加额外的样式类：store-data
2. 为表单设置id属性
3. 为所有表单字段设置name属性，不设置的字段将被忽略

 JavaScript API不需要直接调用。下面是一个样例：

1. 在监听到 pageInit 事件后，F7会调用 formFromJSON 函数，从HTML5的本地存储（Local Storage）中加载数据
2. 在监听到表单元素的 change 事件后，F7会调用 formToJSON() 函数，存储最新的表单元素值到本地存储中

任何一个表单都具有自己的本地存储键，键命名规则为 localStorage.f7form-[formID] ，其中formID就是表单的id属性。本地存储的值是串行化后的JSON对象。

F7提供了一些API，可以用来管理表单的本地存储：

方法/事件	说明
app.formGetData(formId)	获得特定表单的本地存储，返回JSON对象
app.formDeleteData(formId)	删除特地表单的本地存储
formStoreData(formId, formJSON)	以formJSON替换特定表单的本地存储
⚡formFromJSON	formFromJSON()方法被调用后触发
⚡formToJSON	formToJSON()方法被调用后触发

F7支持基于Ajax的自动表单提交，自动提交有两种方式

1. 当用户点击submit按钮时，或者表单的submit事件被手工触发时
2. 当用户修改表单字段值时，或者表单/表单元素的change事件被手工触发时

与上面类似：

事件	说明
⚡submitted	这些事件的Target均为 <form class="ajax-submit"> 元素。分别在： 成功处理XHR请求后 在发送XHR请求前 XHR请求处理失败后 触发。示例： JavaScript 1 2 3 4 $$( 'form.ajax-submit' ).on( 'submitted', function( e ) {     var xhr = e.detail.xhr; // 浏览器的XMLHttpRequest对象     var data = e.detail.data; // Ajax响应的内容 } );
⚡beforeSubmit
⚡submitError

 使用页签，可以方便的在不同内容直接切换。

有时需要在点击链接时，打开（属于不同页签的）多个标签页，这时可以使用data-tab属性而不是href：

需要额外的包装元素：

方法/事件	说明
app.showTab(tab)	激活一个标签页，tab为标签页的HTMLElement或者CSS选择器
⚡show	该事件的Target为 <div class="tab"> ，当页签变得可见时触发，示例： JavaScript 1 2 3 $$('#tab1').on('show', function () {     app.alert('页签一已激活'); });

F7的幻灯片组件Swiper非常强大，支持灵活的配置。该组件已经发展为独立组件，可以不依赖于F7框架使用，并且用在桌面浏览器上也非常合适。

Swiper支持多种特性：

1. 分页：默认显示一组小圆点，类似于iOS主屏幕下部的bullet，指示当前是第几张幻灯片
2. 水平或者垂直方向切换，分页也相应的显示在底部/右侧
3. 嵌套的幻灯片
4. 同时显示多列幻灯片
5. 同时显示多行幻灯片
6. 显示左右侧的导航按钮
7. 循环显示幻灯片
8. 各种切换效果：淡入淡出、3D立方体、3D封面流、3D翻转效果
9. 显示幻灯缩略图
10. 键盘导航、鼠标中键导航
11. 动态增减幻灯片数量
12. 视差效果
13. 以分数（1/10）、进度条等方式显示分页信息
14. 支持图片延迟加载

下面的代码获得通过HTML初始化的幻灯片组件实例：

初始化幻灯片，需要容器元素的DOM已经存在，因此需要在pageInit事件/回调中调用初始化函数：

参数	类型和默认值	说明
initialSlide	number = 0	最初显示的幻灯片的索引
direction	string = 'horizontal'	幻灯片的切换方向，还可以取值“vertical” 如果设置为vertical，则分页bullet显示在右侧而不是底部
speed	number = 300	幻灯切换动画持续的毫秒数
width	number	设置组件的宽高，这些选项会导致幻灯片组件失去响应式（Responsive）特性
height	number
autoHeight	boolean = false	如果设置为true，那么组件包装元素的高度将自动与当前幻灯片的高度一致
roundLengths	boolean = false	如果设置为true，则自动舍入幻灯片的宽高为整数，避免某些屏幕上文本显示模糊
nested	boolean = false	仅在嵌套的、且与父组件direction相同的幻灯组件上设置为true，以修正touch事件拦截
自动播放
autoplay	number	自动播放间隔ms，如果不设置该参数，则禁用自动播放
autoplayStopOnLast	boolean = false	是否在到达最后一张幻灯时停止播放，对循环模式无效
autoplayDisableOnInteraction	boolean = true	是否在用户与组件交互时，停止自动播放 在交互结束后，自动播放会重新开始
CSS特效
effect	string = 'slide'	幻灯片切换CSS特效，可以是： slide： 滑动 fade： 淡入淡出 cube： 3D立方体 coverflow： 3D封面流 flip： 3D翻转
fade	object =  JavaScript 1 2 3 {     crossFade: false }	淡入淡出特效的参数
cube	object =  JavaScript 1 2 3 4 5 6 {   slideShadows: true,   shadow: true,   shadowOffset: 20,   shadowScale: 0.94 }	3D立方体特效的参数，禁用阴影可以获得更好的性能
coverflow	object =  JavaScript 1 2 3 4 5 6 7 {   rotate: 50,   stretch: 0,   depth: 100,   modifier: 1,   slideShadows : true }	3D封面流特效的参数，禁用阴影可以获得更好的性能
flip	object =  JavaScript 1 2 3 4 {   slideShadows : true   limitRotation: true }	3D翻转特效的参数，
视差效果
parallax	boolean = false	如果启用，则可以在幻灯元素内使用parallaxed元素
幻灯片网格
spaceBetween	number = 0	两张幻灯片之间的举例
slidesPerView	number = 1 string = 'auto'	每个视图包含的幻灯片数量，即同时能够显示的幻灯片数量 设置为auto，并且loop: true，则同时需要设置loopedSlides参数 设置为auto，则与多行模式（slidesPerColumn 大于1）不兼容
slidesPerColumn	number = 1	每一列显示幻灯片的数量，多行布局
slidesPerColumnFill	string = 'column'	可选值column/row，指定幻灯片如何填充行
slidesPerGroup	number = 1	指定几张幻灯片分为一组
centeredSlides	boolean = false	如果设置为true，则当前幻灯片被居中显示
slidesOffsetBefore	number = 0	在容器的开始处（所有幻灯片之前）添加额外的偏移量
slidesOffsetAfter	number = 0	在容器的结束处（所有幻灯片之后）添加额外的偏移量
鼠标指针
grabCursor	boolean = false	悬停在幻灯片上时，显示手状鼠标指针
触碰
touchEventsTarget	string = 'container'	在哪个元素上（Target）监听touch事件，可以是： container：在.swiper-container元素上 wrapper：在.swiper-wrapper元素上
touchAngle	number = 45	可以触发移动操作的滑动操作的角度限制
simulateTouch	boolean = true	设置为true，则支持鼠标拖拽模拟触碰滑动操作
shortSwipes	boolean = true	是否启用短滑
longSwipes	boolean = true	是否启用长滑
followFinger	boolean = true	手指滑动时，幻灯片是否也跟着移动
onlyExternal	boolean = false	如果设置为true，则只能通过API调用来切换幻灯片
threshold	number = 0	触发幻灯片移动的最小滑动距离，单位px
touchMoveStopPropagation	boolean = true	是否禁止touchmove事件的传播（propagation）
点击
preventClicks	boolean = true	在滑动时，避免在链接上意外触发click事件
preventClicksPropagation	boolean = true	在滑动时，禁止点击事件的传播
slideToClickedSlide	boolean = false	如果设置为true，在某种幻灯片上点击，则切换至该幻灯片
滑动手势
allowSwipeToPrev	boolean = true	是否允许向前（左/上）滑动
allowSwipeToNext	boolean = true	是否允许向后（右/下）滑动
分页
pagination	string / HTMLElement	分页内容的容器元素或者其CSS选择器
paginationType	string = 'bullets'	分页显示方式： bullets 一排小圆点 fraction 类似于1/10这样的数字 progress 进度条 custom 自定义
paginationHide	boolean = true	是否允许通过点击分页容器，来切换分页的可见性
paginationClickable	boolean = false	是否允许通过点击小圆点来切换到相应幻灯片，仅用于bullet
paginationElement	string = 'span'	单个小圆点在什么HTML标记内显示，仅用于bullet
paginationBulletRender	function(index, className)	bullet类型的分页的渲染函数，示例： JavaScript 1 2 3 4 5 function( index, className ) {     return '<span class="' + className + '">' +                ( index + 1 ) +            '</span>'; }
paginationFractionRender	function(swiper, currentClassName, totalClassName)	fraction类型的分页的渲染函数，示例： JavaScript 1 2 3 4 5 function ( swiper, currentClassName, totalClassName ) {     return     '<span class="' + currentClassName + '"></span>' +     ' of ' + '<span class="' + totalClassName + '"></span>'; };
paginationProgressRender	function(swiper, progressbarClass)	progress类型的分页的渲染函数，示例： JavaScript 1 2 3 function (swiper, progressbarClass) {     return '<span class="' + progressbarClass + '"></span>'; }
paginationCustomRender	function (swiper, current, total)	custom类型的分页的渲染函数，示例： JavaScript 1 2 3 function (swiper, current, total) {     return current + ' of ' + total; }
滚动条
scrollbar	string / HTMLElement	滚动条的容器元素
scrollbarHide	boolean = true	在结束用户交互后，是否自动隐藏滚动条
scrollbarDraggable	boolean = false	是否允许拖拽滚动条
scrollbarSnapOnRelease	boolean = false	是否滚动条后，是否立即确定幻灯片位置
键盘/滚轮
keyboardControl	boolean = false	是否启用键盘导航，如果设置为true，那么可以用上下左右方向键进行幻灯片切换
mousewheelControl	boolean = false	是否启用滚轮导航
mousewheelReleaseOnEdges	boolean = false	如果设置为true，到达第一/最后一张幻灯片后，继续滚动滚轮时，允许页面滚动
mousewheelInvert	boolean = false	是否翻转鼠标滚轮方向
mousewheelSensitivity	number = 1	滚轮滚动速度的倍率
哈希导航
hashnav	boolean = false	设置为true，则允许对幻灯片组件进行哈希导航
图片
preloadImages	boolean = true	如果启用，那么组件会强制预加载所有图片
updateOnImagesReady	boolean = true	如果设置为true，那么所有图片预加载完毕后，组件会重新初始化，需要preloadImages:true
lazyLoading	boolean = false	设置为true则启用延迟加载，需要preloadImages:false
lazyLoadingInPrevNext	boolean = false	设置相邻图片的延迟加载规则 第二个参数指定多远的相邻图片会被预加载，不得小于slidesPerView
lazyLoadingInPrevNextAmount	number = 1
lazyLoadingOnTransitionStart	boolean = false	默认的，组件会在切换动画结束后开始延迟的加载，设置为true，则动画开始时就加载
循环模式
loop	boolean = false	设置为true，则循环播放幻灯片
loopAdditionalSlides	number = 0	启用循环模式后，多少幻灯片被克隆显示
loopedSlides	number = null	在循环模式中，如果同时指定了slidesPerView:'auto'，则需要设置该参数
回调函数
runCallbacksOnInit	boolean = true	是否在幻灯片组件初始化时执行onTransitionStart/End、onSlideChangeStart/End回调
onInit	function(swiper) 其中： swiper 幻灯片组件对象	组件初始化后立即执行
onSlideChangeStart		切换到其它幻灯片的动画开始时执行
onSlideChangeEnd		切换到其它幻灯片的动画结束后执行
onSlideNextStart		与前面类似，但是仅适用于向前切换时
onSlideNextEnd
onSlidePrevStart		与前面类似，但是仅适用于向后切换时
onSlidePrevEnd
onTransitionStart		在转换开始时执行
onTransitionEnd		在转换结束后执行
onTouchStart	function(swiper, event)	用户触碰幻灯片时触发
onTouchMove		用户触碰幻灯片，并滑动手指时触发
onTouchMoveOpposite		用户触碰幻灯片，并以对立方向滑动手指时触发 所谓对立方向是指，如果组件direction是水平的，而手指滑动方向是垂直的
onSliderMove		用户触碰幻灯片，并滑动手指导致幻灯片移动时触发
onTouchEnd		用户放开手指后触发
onClick		用户点击幻灯片后触发，要求手指触碰屏幕至少300ms
onTap		用户轻点幻灯片后触发
onDoubleTap		用户连续两次轻点幻灯片后触发
onImagesReady	function(swiper)	所有图片都加载完毕后触发
onProgress	function(swiper, progress)	幻灯片显示进度变化时触发，progress是0-1之间的数字
onReachBeginning	function(swiper)	幻灯片切换到起始位置（initial position）时触发
onReachEnd	function(swiper)	幻灯片切换到起最后一张时触发
onDestroy	function(swiper)	组件被销毁时触发
onAutoplay	function(swiper)	类似于onSlideChangeStart，但是由自动播放触发
onAutoplayStart	function(swiper)	自动播放开始时触发
onAutoplayStop	function(swiper)	自动部分停止后触发
onLazyImageLoad	function (swiper, slide, image)	开始延迟加载图片时触发
onLazyImageReady	function (swiper, slide, image)	延迟加载的图片加载完毕后触发
CSS名字空间
slideClass	string = 'swiper-slide'	幻灯片的样式类名
slideActiveClass	string = 'swiper-slide-active'	当前幻灯片的样式类名
slideVisibleClass	string = 'swiper-slide-visible'	可见的幻灯片的样式类名
slideDuplicateClass	string = 'swiper-slide-duplicate'	复制的幻灯片的样式类名
slideNextClass	string = 'swiper-slide-next'	下一个幻灯片的样式类名
slidePrevClass	string = 'swiper-slide-prev'	上一个幻灯片的样式类名
wrapperClass	string = 'swiper-wrapper'	组件包装元素的样式类名
bulletClass	string = 'swiper-pagination-bullet'	bullet分页小圆点的类名
bulletActiveClass	string = 'swiper-pagination-bullet-active'	bullet分页当前小圆点的类名
paginationHiddenClass	string = 'swiper-pagination-hidden'	隐藏分页区的类名
paginationCurrentClass	string = 'swiper-pagination-current'	当前分页数值的类名
paginationTotalClass	string = 'swiper-pagination-total'	总计分页数值的类名
paginationProgressbarClass	string = 'swiper-pagination-progressbar'	分页进度条的类名
buttonDisabledClass	string = 'swiper-button-disabled'	禁用按钮的类名

属性/方法	说明
array params	组件初始化参数对象
array container	Dom7/jQuery元素集，container[0]为组件的容器元素
array wrapper	Dom7/jQuery元素集，wrapper[0]为组件的Wrapper元素
array slides	Dom7/jQuery元素集，所有幻灯片元素的集合
array bullets	Dom7/jQuery元素集，所有小圆点的集合
number width	容器的宽度
number height	容器的高度
translate	wrapper的当前translate值
number progress	当前播放进度，0-1之间
number activeIndex	当前活动幻灯片的索引
number previousIndex	前一个幻灯片的索引
boolean isBeginning	如果当前是第一张幻灯片，则为true
boolean  isEnd	如果当前是最后一张幻灯片，则为true
boolean autoplaying	如果当前处于自动播放模式，则为true
boolean animatingru	如果当前正在执行转换动画，则为true
object touches	包含触碰事件若干参数：startX、startY、currentX、currentY、diff
clickedIndex	最后一次被点击的幻灯片的索引
clickedSlide	最后一次被点击的幻灯片
slideNext(runCallbacks, speed)	执行转换动画，并切换到下一张、上一张、指定的幻灯片 runCallbacks 是否执行回调 speed 转换动画执行时间，ms
slidePrev(runCallbacks, speed)
slideTo(index, speed, runCallbacks)
update(updateTranslate)	更新布局和渲染，实际上是调用以下函数： updateContainerSize() 重新计算容器尺寸 updateSlidesSize() 重新计算幻灯片数量及其偏移量 updateProgress() 重新计算播放进度 updatePagination() 重新计算分页布局并重渲染小圆点 updateClasses() 更新幻灯片和小圆点的active/prev/next样式类 在手工添加/删除幻灯片后、隐藏/显示组件后、对组件进行DOM操作后应该调用此方法
onResize()	改变浏览器大小后该方法被调用
detachEvents()	移除所有事件监听器
attachEvents()	重新添加所有监听器
startAutoplay()	开始自动播放
stopAutoplay()	停止自动播放
destroy(deleteInstance, cleanupStyles)	销毁组件实例，移除所有监听器 deleteInstance  是否删除组件实例，默认true cleanupStyles  是否清除自定义样式，默认false
appendSlide(slides)	附加新的幻灯片到组件的尾部、头部。示例： JavaScript 1 2 3 4 5 swiper.appendSlide('<div class="swiper-slide">Slide 10"</div>') swiper.appendSlide([    '<div class="swiper-slide">Slide 10"</div>',    '<div class="swiper-slide">Slide 11"</div>' ]);
prependSlide(slides)
removeSlide(slideIndex)	移除指定索引对应的幻灯片
removeAllSlides()	移除全部幻灯片
setWrapperTranslate(translate)	为Wrapper元素设置CSS转换的translate值
getWrapperTranslate()	获得Wrapper元素的CSS转换的translate值
on(callback, handler)	添加回调函数/事件监听器。示例： JavaScript 1 2 3 swiper.on('slideChangeStart', function () {     console.log('slide change start'); });
once(callback, handler)	添加一次性回调函数/事件监听器
off(callback)	移除指定回调/事件的全部处理函数
lockSwipeToNext()	禁止向前切换幻灯片
unlockSwipeToNext()	禁止向后切换幻灯片
lockSwipes()	禁止幻灯片切换
unlockSwipes()	允许幻灯片切换
disableMousewheelControl()	禁止滚轮控制
enableMousewheelControl()	启用滚轮控制
disableKeyboardControl()	禁止键盘控制
enableKeyboardControl()	启用键盘控制

该组件模拟iOS系统照片浏览器的行为，用于展示图片/照片，支持缩放和平移操作。 

 仅支持通过JavaScript API创建：

参数	类型和默认值	说明
photos	array = []	一个数组，元素可以是： URL字符串 对象，具有url（或者html）、caption属性
initialSlide	number = 0	以幻灯片显示照片（photo slide）时，第一张显示的照片的索引
spaceBetween	number = 20	幻灯片的间距
speed	number = 300	幻灯片切换动画的时间，ms
zoom	boolean = true	是否支持Zoom/Pan操作
maxZoom	number = 3	最大缩放倍数
minZoom	number = 1	最小缩放倍数
exposition	boolean = true	是否在点击照片浏览器后，启用展览模式（exposition mode）
expositionHideCaptions	boolean = false	在展览模式时是否隐藏标题
swipeToClose	boolean = true	如果启用，上下滑动手指可以关闭照片浏览器
view	View	如果使用page类型的照片浏览器，该参数指定页面所在的已初始化的视图
type	string = 'standalone'	定义照片浏览器的打开方式： standalone 打开为overlay，以特定的转换效果 popup 打开为popup page 插入新页面到视图，并加载此页面，在其中打开浏览器
loop	boolean = false	是否循环播放幻灯片
theme	string = 'light'	照片浏览器主题，可以设置为dark，深色
captionsTheme	string	标题的主题，可以设置为dark或light，默认和theme一致
navbar	boolean = true	是否显示照片浏览器的导航栏
toolbar	boolean = true	是否显示照片浏览器的工具栏
backLinkText	string = 'Close'	返回链接的文字
ofText	string = 'of'	可以设置of的替换文本
延迟加载
lazyLoading	boolean = false	是否启用照片延迟加载
lazyLoadingInPrevNext	boolean = false	设置为true，则启用临近（左/右）照片的延迟加载
lazyLoadingOnTransitionStart	boolean = false	是否在切换动画开始时即加载照片
模板
template	string	照片浏览器的Template7模板
navbarTemplate	string	导航栏的Template7模板
toolbarTemplate	string	工具栏的Template7模板
photoTemplate	string	单个照片元素的Template7模板
photoLazyTemplate	string	单个延迟加载照片的Template7模板
objectTemplate	string	单个object元素的Template7模板
captionTemplate	string	单个标题元素的Template7模板
回调
onOpen	function(photobrowser)	照片浏览器打开时执行
onClose	function(photobrowser)	照片浏览器关闭时执行
onSwipeToClose	function(photobrowser)	用户通过滑动手势关闭照片浏览器时执行
onSlideChangeStart	function(swiper)	在动画开始前/结束后执行
onSlideChangeEnd	function(swiper)
onTransitionStart	function(swiper)	在转换开始前/结束后执行
onTransitionEnd	function(swiper)
onClick	function(swiper, event)	点击/触碰照片超过300ms后触发
onTap	function(swiper, event)	轻触照片后触发
onDoubleTap	function(swiper, event)	连续两次轻触照片后触发
onLazyImageLoad	function(swiper, slide, image)	开始照片延迟加载前触发
onLazyImageReady	function(swiper, slide, image)	照片延迟加载完毕后触发

属性/方法	说明
swiper	包含已经初始化的幻灯片组件的（Swiper）实例
container	容器元素的Dom7元素
exposed	是否处于展览模式
activeSlideIndex	当前照片索引
params	所有初始化参数
open(index)	打开照片浏览器并切换到指定索引的照片，如果不指定index，则显示上一次打开的照片
close()	关闭照片浏览器
toggleZoom()	启用/禁用当前照片的缩放
toggleExposition()	启用/禁用展览模式
enableExposition()	启用展览模式
disableExposition()	禁用展览模式

照片浏览器组件允许通过模板定制其UI

其它模板都会嵌入到该模板中。

 F7提供了一个移动设备友好、为触碰操作优化的自动完成组件。

只能通过JavaScript API创建：

参数	类型和默认值	说明
openIn	string = 'page'	组件如何打开： page 页面 popup 弹窗 dropdown 下拉列表
source	function (autocomplete, query, render)	该函数执行搜索： autocomplete 组件实例 query 查询文本 render 渲染回调，必须传递匹配条目的数组给此回调 示例： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var allItems = []; function source( autocomplete, query, render ) {     var results = [];     if ( query.length === 0 ) {         // 无查询条件         render( results );         return;     }     //根据查询条件过滤数据     for ( var i = 0; i < fruits.length; i++ ) {         if ( allItems.indexOf( query ) >= 0 ) {             results.push( fruits[i] );         }     }     //调用渲染函数     render( results ); }
limit	number	自动完成显示条目的最大数量
preloader	boolean = false	设置为true，则在自动完成的布局中添加预加载指示器（Preloader）
preloaderColor	string	预加载指示器的颜色，可以是white/black
valueProperty	string = 'id'	匹配条目的什么属性作为值（Value）使用
textProperty	string = 'text'	匹配条目的什么属性作为显示值（Display value）使用
专用于Standalone模式（以page或popup打开组件）的参数
opener	string/HTMLElement	链接的HTMLElement或CSS选择器，点击此链接后打开自动完成页面或者Popup
popupCloseText	string = 'Close'	Popup关闭文本
backText	string = 'Back'	页面的后退文本
pageTitle	string	页面的标题
searchbarPlaceholderText	string = 'Search...'	搜索栏占位符文本
searchbarCancelText	string = 'Cancel'	搜索栏取消按钮文本
notFoundText	string = 'Nothing found'	无匹配条目条目时显示的文本
multiple	boolean = false	是否允许选择多个条目
backOnSelect	boolean = false	选中一个条目后立即关闭自动完成组件，仅用于单选模式
navbarTheme	string	导航栏主题颜色
formTheme	string	表单主题颜色
专用于下拉菜单模式的参数
input	string/HTMLElement	与此自动完成组件相关的文本输入框
dropdownPlaceholderText	string	下拉列表占位符文本
updateInputValueOnSelect	boolean = true	选中一个条目后，自动更新文本输入框
expandInput	boolean = false	如果设置为true，则列表视图中的item-input元素的宽度扩展为屏幕宽度
回调
onChange	function (autocomplete, value)	自动完成值改变后，执行此回调： autocomplete 组件实例 value 选中的条目
onOpen	function (autocomplete)	自动完成组件打开时执行此回调
onClose	function (autocomplete)	自动完成组件关闭时执行此回调
模板
navbarTemplate	string	Standalone模式导航栏模板
itemTemplate	string	Standalone模式表单条目（radio/checkbox）模板
dropdownTemplate	string	下拉列表模板
dropdownItemTemplate	string	下拉列表条目的模板
dropdownPlaceholderTemplate	string	下拉列表占位符的模板

方法/属性	说明
params	组件的初始化参数
value	选中条目的数组
opened	组件是否处于打开状态
dropdown	下拉列表的Dom7实例
popup	Popup（如果打开）的Dom7实例
open()	打开组件
close()	关闭组件
showPreloader()	显示预加载提示符
hidePreloader()	隐藏预加载提示符
destroy()	销毁组件，解除所有事件监听器

本节列出F7为自动完成组件提供的缺省模板，定制这些模板可以改变组件的外观。

导航栏模板：该模板用于Standalone模式。

列表条目模板：每个备选条目（列表视图的元素）使用的模板。

下拉菜单外框使用的模板。

下拉菜单模式下，每个备选条目使用的模板。

下拉菜单模式下，占位符文本使用的模板。

Picker提供了一些基础功能，利用这些功能，你可以很方便的定制UI风格与iOS类似的选取器。

Picker可以用作内联组件（ inline component），也可以用作Overlay。在平板电脑上，Overlay的选取器自动被转换为Popover。

只能通过JavaScript API创建：

对于通过内联（inline）方式创建的选取器，可以通过其HTML容器的属性获得选取器实例：

参数	类型和默认值	说明
container	HTMLElement/string	仅用于内联（inline）选取器，存放生成的选取器对象的容器的HTMLElement或者CSS选择器
input	HTMLElement/string	与此选取器相关的input元素的HTMLElement或者CSS选择器
scrollToInput	boolean = true	当打开选取器时，滚动视口（Viewport，即page-content）到input元素
inputReadOnly	boolean = true	如果设置为true，则input元素被设置readonly属性
convertToPopover	boolean = true	在大屏幕上（Pad）把模态选取器转换为Popover
onlyOnPopover	boolean = false	如果设置为true，则选取器总是在Popover中打开
cssClass	string	在模态选取器上设置的额外CSS类
closeByOutsideClick	boolean = true	是否在点击外部区域后，自动关闭选取器
toolbar	boolean = true	启用模态选取器工具栏
toolbarCloseText	string = 'Done'	选取器工具栏上关闭按钮的文本
toolbarTemplate	string =  XHTML 1 2 3 4 5 6 7 8 9 10 <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>	工具栏的Template7模板
rotateEffect	boolean = false	是否启用3D滚动效果
momentumRatio	boolean = false	对选取器进行触碰并滑动操作后，更大的值是否产生更多的momentum
updateValuesOnMomentum	boolean = false	在momentum期间是否更新选取器和input的值
updateValuesOnTouchmove	boolean = true	在触碰并滑动时，是否更新选取器和input的值
value	array	初始值的数组，每个元素对应了选取器单个列的值
formatValue	function (p, values, displayValues)	用于格式化input的值的函数，values/displayValues为两个数组，其索引为idx的元素，分别为当前选取器值第idx列的值/显示值
cols	array	选取器的数据定义，为一个数组，其每个元素定义了选取器的单个列，元素格式为PO，符合“列参数”规定
onChange	function (p, values, displayValues)	当选取器的值改变时该函数被调用。values/displayValues为两个数组，其索引为idx的元素，分别为当前选取器值第idx列的值/显示值
onOpen	function (p)	选取器打开时，执行该回调
onClose	function (p)	选取器关闭时，执行该回调

参数	类型和默认值	说明
values	array	该列的值数组
displayValues	array	该列的显示值数组
cssClass	string	在列HTML容器上设置的额外CSS样式类
textAlign	string	列文本的对齐方式，可以是left/center/right
width	number	列宽度，单位px
divider	boolean = false	作为分隔字符的列，不需要values/displays，例如用来隔开时间的冒号
content	string	分隔字符（串）的内容
onChange	function (p, value, displayValue)	列的值发生变化时调用此回调

属性/方法	说明
params	初始化参数
value	数组，选取器当前每列的值
displayValue	数组，选取器当前每列的显示值
opened	此选取器当前是否处于打开状态
inline	此选取器是否为内联的
cols	列对象的数组，每个元素都有自己的属性和方法（参见下表）。下面示例如何获得第一个列对象： JavaScript 1 2 // 获取第一个列对象 var col = picker.cols[0];
container	选取器的HML容器的Dom7对象
setValue(values, duration)	设置选取器的值： values：数组，对应每个列的值 duration：动画持续时间
open()	打开选取器
close()	关闭选取器
destroy()	销毁选取器实例，移除所有监听器

属性/方法	说明
container	列HTML元素的Dom7对象
items	列条目HTML元素的Dom7对象
value	列的当前值
displayValue	列的当前显示值
activeIndex	列当前值在值列表中的索引
setValue(value, duration)	设置此列的当前值
replaceValues(values, displayValues)	替换此列的值/显示值列表

所谓联动，是指第一列的值改变后，第二列的值列表自动被替换： 

这是一个多列、内联的选取器实例：

F7提供的日历（Calendar）组件为触碰操作优化，可以方便的处理日期字段。与一般的选取类似，日历支持内联、overlay展示方式。

只能通过JavaScript API创建日历实例：

参数	类型和默认值	说明
container	HTMLElement/string	同普通选取器组件
input	HTMLElement/string
scrollToInput	boolean = true
inputReadOnly	boolean = true
convertToPopover	boolean = true
onlyOnPopover	boolean = false
cssClass	string
closeByOutsideClick	boolean = true
toolbar	boolean = true
toolbarCloseText	string = 'Done'
toolbarTemplate	string =  XHTML 1 2 3 4 5 6 <div class="toolbar">   <div class="toolbar-inner">     {{monthPicker}}     {{yearPicker}}   </div> </div>
value	array	初始被选中的日期的数组，每个元素为选中的日期（Date）对象
disabled	DateRange，用于表示日期的范围，可以用数组、函数、对象三种形式表示： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 //数组方式，指定起止日期 var range = [     new Date(2015, 10, 10),     new Date(2015, 10, 11) ];   //函数方式，对任意日期返回true/false //true则包含在Range内 function range( date ) {     if ( date.getFullYear() === 2015          && date.getMonth() === 10 ) {         return true;     }     else {         return false;     } }   //对象方式 range = {     from: new Date(2015, 9, 1),     to: new Date(2015, 11, 31) }	额外的被禁用的日期范围
events		具有事件的日期范围，这些日期数字的下面具有额外的小圆点标记
rangesClasses	array	用于为日期范围添加额外的样式。为一数组，每个元素均为： JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 {cssClass:string, range: DateRange}   //举例： var calendar = app.calendar( {     rangesClasses : [ {         cssClass : 'day-holiday',         range : {             from : new Date( 2016, 0, 1 ),             to : new Date( 2016, 0, 10 )         }     } ] } );
formatValue	function (p, values)	格式化日期，输出到input元素。函数的返回值必须是一个string，values为Date对象的数组
monthNames	array =  ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']	所有月份的名称
monthNamesShort	array =  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	所有月份的简称
dayNames	array =  ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']	所有DOW的名称
dayNamesShort	array =  ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	所有DOW的检查
updateValuesOnTouchmove	boolean  = true	在触碰被移动后，更新选取器和input的值
firstDay	number = 1	一周的第一天，默认1即星期一
weekendDays	array = [0, 6]	周末是那几天，默认周六、日
dateFormat	string = 'yyyy-mm-dd'	日期格式： yyyy 四位年份 yy 二位年份 mm 二位月份 m 月份 MM 完整月份名称 M 月份短名称 dd 二位日期 d 日期 DD 完整DOW名称 D  DOW简称
multiple	boolean = false	允许选择多个日期值
rangePicker	boolean = false	允许范围选择，与multiple不兼容
direction	string = 'horizontal'	月份布局方向，可以是vertical/horizontal
minDate	Date = null	允许的最小日期
maxDate	Date = null	允许的最大日期
touchmove	boolean = true	触碰并滑动时是否切换日历月份
animate	boolean = true	启用动画效果
closeOnSelect	boolean = false	选择后是否立即关闭日历
weekHeader	boolean = true	是否显示DOW头，以DOW简称
monthPicker	boolean = true	是否在工具栏显示月份选择器
monthPickerTemplate	string =  XHTML 1 2 3 4 5 6 7 8 9 <div class="picker-calendar-month-picker">     <a href="#" class="link icon-only picker-calendar-prev-month">         <i class="icon icon-prev"></i>     </a>     <span class="current-month-value"></span>     <a href="#" class="link icon-only picker-calendar-next-month">         <i class="icon icon-next"></i>     </a> </div>	月份选择器的Template7模板
yearPicker	boolean = true	是否在工具栏显示年度选择器
yearPickerTemplate	string =  XHTML 1 2 3 4 5 6 7 8 9 <div class="picker-calendar-year-picker">     <a href="#" class="link icon-only picker-calendar-prev-year">         <i class="icon icon-prev"></i>     </a>     <span class="current-year-value"></span>     <a href="#" class="link icon-only picker-calendar-next-year">         <i class="icon icon-next"></i>     </a> </div>	年度选择器的Template7模板
onChange	function (p, values, displayValues)	选取器的值改变后，执行该回调
onMonthAdd	function (p, monthContainer)	新的月份对应的HTML加入到DOM后执行
onDayClick	function (p, dayContainer, year, month, day)	用户点击/选择任意日期后执行
onMonthYearChangeStart	function (p, year, month)	在动画切换月份开始时执行
onMonthYearChangeEnd	function (p, year, month)	在动画切换月份结束时执行
onOpen	function (p)	在打开日历时执行
onClose	function (p)	在关闭日历时执行

属性/方法	说明
params	日历的初始化参数
value	数组，包含当前选中的日期对象
opened	如果日历当前处于打开状态，则为true
inline	如果当前日历是内联的，则为true
container	日历组件的HTML容器，Dom7对象
setValue(values)	设置新的，被选择的日期，支持入参数组
nextMonth(duration)	在duration毫秒后，动画至下一月
prevMonth(duration)	在duration毫秒后，动画至上一月
nextYear()	动画至下一年
prevYear()	动画至上一年
setYearMonth(year, month, duration)	在duration毫秒后，动画至year年month月
open()	打开日历
close()	关闭日历
destroy()	销毁日历实例并移除事件监听器

下拉刷新是很多移动应用使用的组件， 用于触发页面内容更新。

可以集成下拉刷新功能到页面中：

1. 当用户下拉pull-to-refresh-content元素时，该元素获得额外样式类：pull-down
2. 当用户下拉pull-to-refresh-content元素超过data-ptr-distance后，该元素获得额外样式类：pull-up。默认的，箭头图标的方向将反转，提示用户可以释放并刷新
3. 当处于pull-up状态时，用户释放下拉手势，pull-to-refresh-layer元素获得额外样式类：refreshing。默认的箭头图标隐藏，预加载提示符显示

事件	说明
⚡pullstart	这些事件的Target均为 <div class="pull-to-refresh-content"> 元素，触发时机分别为： 开始下拉pull-to-refresh-content元素时 在移动pull-to-refresh-content元素的过程中 释放pull-to-refresh-content元素时 组件进入刷新（refreshing）状态时 刷新完毕后，组件返回初始状态时，该事件在 pullToRefreshDone() 被调用后触发
⚡pullmove
⚡pullend
⚡refresh
⚡refreshdone

方法	说明
app.pullToRefreshDone(ptrContent)	ptrContent为pull-to-refresh-content元素对应的HTMLElement或者CSS选择器，下同 当刷新动作完成后，调用此方法可以重置组件，用户可以再次下拉刷新
app.pullToRefreshTrigger(ptrContent)	手工触发下拉刷新操作
app.destroyPullToRefresh(ptrContent)	禁用页面上的下拉刷新组件
app.initPullToRefresh(ptrContent)	启用页面上的下拉刷新组件

 当页面滚动到接近底部时，利用无限滚动组件可以加载额外的内容或者触发特定的动作。

可以在任何可滚动容器上添加额外样式类，来启用无限滚动组件。例如：

默认的，页面滚动到底部时触发无限滚动，如果要在滚动到顶部时触发无限滚动，可以：

方法/事件	说明
⚡infinite	该事件的Target为 <div class="page-content infinite-scroll"> 元素。当页面滚动到里底部还有data-distance时触发
app.attachInfiniteScroll(container)	添加/移除无限滚动事件监听器到infinite-scroll元素对应的HTMLElement或者CSS选择器
app.detachInfiniteScroll(container)

使用通知组件，可以实现类似于iOS消息推送（Push）的效果。

通知仅仅是媒体列表视图的特例，通常不需要手工处理其布局（JavaScript API会自动创建）。当你创建了通知组件后，F7会自动添加notifications元素到body中：

方法	说明
app.addNotification(parameters)	以初始化参数parameters添加/显示一个通知
app.closeNotification(notificationElement)	关闭一个通知，notificationElement为对应的HTMLElement或者CSS选择器

参数	类型和默认值	说明
title	string	仅iOS主题。通知的标题，默认值为应用初始化参数notificationTitle
subtitle	string	仅iOS主题。通知子标题，默认值为应用初始化参数notificationSubtitle
media	string	仅iOS主题。媒体元素，指定图标/图片的HTML字符串，默认值为应用初始化参数notificationMedia
hold	number	在多少ms后自动关闭通知，默认值为应用初始化参数notificationHold
closeIcon	boolean = true	仅iOS主题。是否显示关闭图标
button	object	Material通知按钮，支持三个属性： text 按钮文本 color 按钮颜色名称 close 点击后是否关闭通知
closeOnClick	boolean = false	是否在点击后自动关闭通知
additionalClass	string	在通知元素上添加的额外样式类，用于外观定制
custom	string	用于定制通知的HTML布局
onClick	function	通知被点击后执行的回调
onClose	function	通知被关闭后执行的回调

该组件用于推迟页面中图片的加载，仅当页面滚动到图片所在位置时，才触发加载动作。该功能可以提升页面加载速度、滚动性能，并降低流量消耗。

要延迟加载的图片必须位于可滚动的页面（ <div class="page-content"> ）内。

 当延迟加载的图片成功加载后，可以淡入的显示：

手工触发lazy事件，即可立即加载目标图片：