3.3.1 pullLoad

说明: 方便用户快速完成加载刷新, 增强用户体验

使用及参数说明:

<div id="pullLoad" class="xui_pull_load">
	<div class="xui_pull_content">下拉加载</div>
</div>

var load = new xui.pullLoad({
	id: string,
	loading: string,
	maxScrollHeight: number,
	activeScrollHeight: number,
	fn: function(){
		setTimeout(() =>{
			xui.message('异步数据请求成功');
			load.ele.innerHTML = Math.PI.toString().substr(0, Math.random() * 6 + 4);
			load.finished();
		},2000);
	}
});

• id表示下拉加载容器,必传
• loading表示容器下拉后, loading的文案, 支持文字和图片
• maxScrollHeight表示允许下拉的最大高度
• activeScrollHeight表示触发回调的最大高度, 不大于maxScrollHeight
• fn表示回调, 可以在这里去异步请求数据, 然后调用ished方法
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.我们先来看看一个最基本的例子,用最少的代码实现最多的功能.

下拉加载

<div id="pullLoad" class="xui_pull_load">
	<div class="xui_pull_content">下拉加载</div>
</div>```

```js
var load = new xui.pullLoad({
	id: 'pullLoad',
	fn: function(){
		setTimeout(() =>{
			xui.message('异步数据请求成功');
			load.ele.innerHTML = Math.PI.toString().substr(0, Math.random() * 6 + 4);
			load.finished();
		},2000);
	}
});

2.这里我们配置了更多参数,欢迎体验

下拉加载

<div id="pullLoad1" class="xui_pull_load">
	<div class="xui_pull_content">下拉加载</div>
</div>```

```js
var load1 = new xui.pullLoad({
	id: 'pullLoad1',
	loading: '<img src="/img/loading.gif" />',
	maxScrollHeight: 130,
	activeScrollHeight: 50,
	fn: function(){
		setTimeout(() =>{
			xui.message('异步数据请求成功');
			load1.ele.innerHTML = Math.round(Math.random() * 1000);
			load1.finished();
		},2000);
	}
});