3.2.1 scrollLoad

说明: 用于移动端滑动加载数据, 当然pc端也是可以的

使用及参数说明:

var test = new xui.scroll();
test.onscroll = function(height){
    if (height == 0) {
        xui.loading(true, '.loading');
        setTimeout(() => {
            xui.loading(false);
        },2000);
    };
};

• id是指希望滚动加载的元素, 不传是监听window, 也就是整个窗口的滚动事件
• 首先new一个scroll, 然后给它写一个onscroll函数, 传的参数就是当前滚动时距离底部的距离
• 你可以在height为0 时去请求下一页的数据, 然后在渲染出来, 删除掉loading即可
• loading的第二个参数可以指定在哪个容器里, 用于下拉加载在适合不过了
• loading可以是单独一个容器, 也可以直接追加到渲染列表里. 到时候记得删掉就好了
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.让我们先滚动加载的例子吧, 滑动下面这段文字看看吧

var test = new xui.scroll({
    id: 'example'
});
test.onscroll = function(height){
    if (height == 0) {
        xui.loading(true, '.loading');
        setTimeout(() => {
            xui.loading(false);
        },2000);
    };
};
test.init();