开发手册 欢迎您!
软件开发者资料库

Framework7 - 刷新

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

描述

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

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

                           
      
               ...   

以下类用于刷新 :

  • 页面内容 : 它有一个额外的 pull-to-refresh-content 类,它需要启用pull来刷新.

  • pull -to-refresh-layer : 它是一个隐藏层,用于拉动刷新视觉元素,它只是一个预加载器和一个箭头.

  • data-ptr-distance ="55" : 这是附加属性,允许您设置自定义"拉到刷新"触发距离,其默认值为44px.

拉动刷新事件

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

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,输出显示如下.

  • 当用户下拉时,页面将刷新内容.

cript>