首页 > MiniRefresh.js下拉刷新插件教程和帮助手册 > Minirefresh上拉加载更多数据

Minirefresh上拉加载更多数据

上拉加载更多数据

Minirefresh手指往上滑动时自动加载更多数据,直到没有数据。下面例子演示了每次上拉加载50条数据,达到一定数据后提示没有更多数据。
注意前提条件
           1,要触发上拉事件必须是网页有滚动条(即内容高度大于window网页窗口高度)
           2,或你同时设置isAuto: true, loadFull: true,这事内容未达到一屏时,会自动加载直到满屏。

var mRefresh = new MiniRefresh({
container: '#mrefresh', //这里是插件的容器ID    
up: {
    isAuto: true,
    loadFull:{
         isEnable:true,
         delay:1000
        },
    callback: function () {
        // 向上拉后的回调事件,加载数据,触发这个事件的前提是网页内容高度大于可视高度,及出现了滚动条
        getData();
        
    }
}
});
var pos = 0;
function getData()
{


for (var i = pos; i < pos+ 50; i++)
    {
    $(".list ul").append("<li>新数据" + i + "</li>");


}
pos = pos + 50;
         
    if (pos > 100)
        mRefresh.endUpLoading(true); //数据全部加载完了,再上拉也不会触发up回调事件
        else
        mRefresh.endUpLoading(false); //后台还有数据可加载,用户再次向上滑动还会触发事件
}
在线试一试