JRoll的下拉组件jroll-pulldown.js,依赖JRoll2,必须要先加载jroll.js。为了不占用太多的全局变量,该组件以JRoll原型链的一个方法形式存在,只要运行过jroll-pulldown.js即可给JRoll的实例调用。
普通方式引入
<script src="jroll.js"></script>
<script src="jroll-pulldown.js"></script>
CommonJS规范引入
var JRoll = require('jroll.js');
require('jroll-pulldown.js'); //不需要赋给变量,运行就好了
var jroll = new JRoll("#wrapper");
jroll.pulldown(); //使能下拉刷新,具体配置详见下文
AMD规范引入(requireJS)
//配置jroll-pulldown依赖jroll
require.config({
baseUrl: './',
paths: {
'jroll-pulldown': 'js/jroll-pulldown'
}
shim: {
'jroll-pulldown': {
deps: ['jroll'] //jroll.js的路径
}
}
});
define(['jroll-pulldown'], function(JRoll) {
//jroll-pulldown将会返回JRoll,因此不需要单独引入jroll.js
var jroll = new JRoll("#wrapper");
jroll.pulldown(); //使能下拉刷新,具体配置详见下文
});
创建JRoll实例,调用pulldown方法使能下拉刷新
var jroll = new JRoll("#wrapper");
jroll.pulldown({
refresh: function(complete) {
//完成加载数据的操作后回调执行complete方法
complete();
}
});
选项 | 默认值 | 必填 | 说明 |
---|---|---|---|
iconArrow | [自带箭头图片] | N | 下拉过程中的箭头图标 |
iconLoading | [自带刷新图片] | N | 刷新过程中的图标 |
iconFinish | [自带完成图片] | N | 刷新完成后显示的图标 |
textPull | 下拉刷新 | N | |
textRelease | 释放刷新 | N | |
textLoading | 正在加载 | N | |
textFinish | 刷新完成 | N | |
spinning | true | N | 控制刷新时是否旋转icon |
refresh | null | Y | 刷新过程中执行的方法,必填,且最后必须执行传给refresh的方法来复位刷新 |