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>

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>

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);
    }
});