html5下拉刷新框架,Framewrok7 - 下拉刷新功能的实现（附样例）

在移动应用开发中，列表的下拉刷新是一个很常见的功能。Framewrok7本身就自带了一个下拉刷新组件，直接添加到页面上就可以轻松实现下拉刷新功能。而且不仅仅局限在表格上使用，其他需要下拉刷新的地方都可以使用。

一、基础功能介绍

1，效果图

(1)下面给表格添加个下拉刷新功能，下拉时表格上方会有个向下的箭头。

(2)下拉到一定距离放开后，箭头图标变成环形进度条，表示开始加载数据。(这里直接使用本地生成的随机数据作为演示)

(3)数据加载完毕后，进度条消失。表格恢复到原来位置。

   

   

2，使用说明

(1)对于允许下拉刷新的 page-content 容器要添加pull-to-refresh-content样式。

(2)页面上还需添加个下拉刷新层(pull-to-refresh-layer)，用于显示箭头以及 preloader图标。

(3)数据加载完毕后，我们要手动调用 myApp.pullToRefreshDone()。隐藏下拉层，并将表格恢复原位。

3，样例代码

(1)index.html

hangge.com

hangge.com

(2)my-app.js

// 初始化 app

var myApp = new Framework7({

init: false //禁用App的自动初始化功能

});

// 为便于使用，自定义DOM库名字为$$

var $$ = Dom7;

// 添加首页视图

var mainView = myApp.addView('.view-main', {

// 让这个视图支持动态导航栏

dynamicNavbar: true,

});

//index页面初始化

myApp.onPageInit('index', function (page) {

//初始数据

refreshData();

//下拉刷新

$$('#articles').on('refresh', function (e) {

//为更好的看到效果，这里加个延时

setTimeout(refreshData,700);

});

});

//刷新数据

function refreshData() {

var itemHTML = "";

for(var i=0; i<5; i++){

itemHTML += '

' +

'

' +

'

测试数据'+Math.round(Math.random()*100)+'

' +

'

' +

'

';

}

//重新设置数据

$$('#articles').find('ul').html(itemHTML);

//刷新完毕后，重置下拉状态

myApp.pullToRefreshDone();

}

//初始化应用

myApp.init();

二、高级用法

1，修改下拉刷新的触发距离

上面的样例我们使用默认的触发距离(即下拉 44px距离后开始执行刷新操作)。通过 data-ptr-distance属性值我们可以自定义下拉的触发距离。

...

2，下拉刷新相关事件

上面样例我们监听了下拉组件的刷新事件(refresh)。其实整个下拉过程中，各个步骤状态都有相应的事件。

Event

Target

Description

pullstart

Pull To Refresh content

开始下拉时触发

pullmove

Pull To Refresh content

下拉拖动时触发

pullend

Pull To Refresh content

松开后停止下拉时触发

refresh

Pull To Refresh content

进入“刷新”状态时触发

refreshdone

Pull To Refresh content

刷新完毕后触发，恢复原来状态 (在pullToRefreshDone方法执行后)

3，重置下拉刷新

前面样例中，我们数据刷新完毕后调用 myApp.pullToRefreshDone()方法重置页面上所有下拉组件，将它们恢复到初始状态。

我们也可以单独指定需要重置的对象。

myApp.pullToRefreshDone("#articles");

4，使用代码触发下拉刷新

我们也可以在 js 中使用代码来触发下拉刷新这个操作(触发后同样有下拉移动，进度条显示等效果)。

myApp.pullToRefreshTrigger('#articles');

5，启用/停用下拉刷新功能

//禁止下拉刷新功能

myApp.destroyPullToRefresh('#articles')

//重新启用下拉刷新功能

myApp.initPullToRefresh('#articles')