html5 pulltorefresh,【文档】mui.pullToRefresh插件

下拉刷新和上拉加载,是大部分应用中都会用到的功能。

mui结合html5plus的API,封装了一套可以在Android和iOS上实现的配置,详细参考mui相关文档。

为了方便开发wap站的开发者,mui还扩展了pullToRefresh插件。

依赖

mui.js

mui.pullToRefresh.js

mui.pullToRefresh.material.js

同样,和其它一些插件一样,在HBuilder中新建hello mui示例工程,或在在github上均可获取以上资源。

初始化组件

初始化方法

var pullToRefresh = mui(selector).pullToRefresh(options);

配置信息

下拉配置

down: {

callback: function(){} //下拉回调函数

}

目前下拉只有这一个配置项,下拉的动画是canvas绘制的,想调整的话需要修改mui.pullToRefresh.material.js中的相关代码。

上拉配置

up: {

callback: function(){}, //上拉回调,必填;

auto: false, //自动执行一次上拉加载,可选;

show: true, //显示底部上拉加载提示信息,可选;

contentinit: '上拉显示更多', //可以上拉提示信息

contentdown: '上拉显示更多', //上拉结束提示信息

contentrefresh: '正在加载...', //上拉进行中提示信息

contentnomore: '没有更多数据了' //上拉无更多信息时提示信息

}

常用API

下拉相关

手动触发下拉

pullToRefresh.pullDownLoading();

结束下拉

pullToRefresh.endPullDownToRefresh();

上拉相关

手动触发上拉

pullToRefresh.pullUpLoading();

结束上拉

pullToRefresh.endPullUpToRefresh(Boolean); //传true代表无更多信息,默认可不传;

禁用/开启组件

pullToRefresh.setStopped(Boolean);

刷新组件

上拉的操作,如果无更多信息后,调用结束上拉并且传true会禁用上拉。如果需要重新开启上拉,则需要刷新组件。

pullToRefresh.refresh(true);

结尾

附件中提供了一个简单的,使用mui.pullToRefresh制作的例子。多个选项卡的情景,请参考hello mui示例中的pullrefresh_with_tab.html。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值