Framework7 - 刷新

Framework7刷新 - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7动作按钮，表单，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点按保持事件，触摸波纹。

描述

这是一个特殊的组件，用于通过拉动来刷新(重新加载)页面内容.

以下代码显示如何刷新页面内容 :

...

以下类用于刷新 :

页面内容 : 它有一个额外的 pull-to-refresh-content 类，它需要启用pull来刷新.
pull -to-refresh-layer : 它是一个隐藏层，用于拉动刷新视觉元素，它只是一个预加载器和一个箭头.
data-ptr-distance ="55" : 这是附加属性，允许您设置自定义"拉到刷新"触发距离，其默认值为44px.

拉动刷新事件

在"拉动刷新"中有一些JavaScript事件，在下表中给出 :


 < div class ="拉至刷新内容">
 < div class ="pull-to-refresh-content"> ;
 < div class ="pull-to-refresh-content" >
 < div class ="pull-to-refresh-content">
 < div class ="pull-to-refresh-content">

S.No	活动&说明	目标
1	pullstart 每当您开始提取内容时，它都会被触发.	拉动刷新内容. < div class ="拉至刷新内容">
2	pullmove 当您提示刷新内容时会触发.	拉动刷新内容. < div class ="pull-to-refresh-content"> ;
3	pullend 每当您释放pull以刷新内容时，它都会被触发.	拉动刷新内容. < div class ="pull-to-refresh-content" >
4	刷新当拉动刷新进入"刷新"时，将触发此事件州.	拉动刷新内容. < div class ="pull-to-refresh-content">
5	refreshdone 刷新后会触发它并返回初始状态.这将在调用 pullToRefreshDone 方法后完成.	拉动刷新内容. < div class ="pull-to-refresh-content">

可以使用App的方法使用Pull to Refresh.

S.否	App的方法&说明
1	myApp.pullToRefreshDone(ptrContent) 它用于重置 pull-to-refresh 内容.
2	myApp.pullToRefreshTrigger(ptrContent) 它用于触发刷新指定的拉动以刷新内容.
3	myApp.destroyPullToRefresh(ptrContent) 它用于销毁/禁用拉动以刷新指定的拉动以刷新内容.
4	myApp.initPullToRefresh(ptrContent) 它用于初始化/启用拉动以刷新内容.

其中 ptrContent 用于 HTMLElement 或 string 拉到刷新内容以重置/触发或禁用/启用.

示例

以下示例演示如何使用刷新组件启动页面内容的刷新 :

                           Pull To Refresh                                                                                                                         Pull To Refresh                                                                                                                                                                                                                                                                                                                                        apple                                                                                                                                                                                                                              strawberry                                                                                                                                                                                                                              Mango                                                                                                      
                                             Just pull page down to let the magic happen.

输出

让我们执行以下步骤，看看上面给出的代码如何工作 : 去;

将上面给出的HTML代码保存为服务器根文件夹中的 pull_to_refresh.html 文件.
将此HTML文件打开为http://localhost/pull_to_refresh.html，输出显示如下.
当用户下拉时，页面将刷新内容.