mescroll.js实现下拉刷新，上拉加载！！

拼搏现实的明天。 2022-06-04 01:13 284阅读 0赞

一：下载并引用

二：html部分：

备注：id="mescroll"可以更换但是class="mescroll"不能更换

三：js部分：

1：  进入页面前，后台初始化页码、条数，获取总数据量

2：书写mescroll部分：

//创建MeScroll对象

$(function()\{  
var mescroll = initMeScroll("mescroll", \{  
down:\{  
auto:true,//是否在初始化完毕之后自动执行下拉回调callback; 默认true  
callback: downCallback, //下拉刷新的回调  
\},  
up: \{  
auto:true,//初始化完毕,是否自动触发上拉加载的回调  
isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;  
callback: upCallback, //上拉加载的回调  
toTop:\{ //配置回到顶部按钮  
src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改  
//offset : 1000  
\}  
\}  
\});

/\*下拉刷新的回调 \*/  
function downCallback()\{  
//加载轮播数据..  
//...  
//加载列表数据  
getListDataFromNet(0, 1, function(data)\{  
//联网成功的回调,隐藏下拉刷新的状态  
mescroll.endSuccess();  
//设置列表数据  
setListData(data, false);  
//显示提示  
$("\#downloadTip").css("top","44px");  
setTimeout(function () \{  
$("\#downloadTip").css("top","20px");  
\},2000);  
\}, function()\{  
//联网失败的回调,隐藏下拉刷新的状态  
                mescroll.endErr();  
\});  
\}

/\*上拉加载的回调 page = \{num:1, size:10\}; num:当前页 从1开始, size:每页数据条数 \*/    
        var page = \{num : pageNo, size : pageSize\};    
        function upCallback(page)\{    
            //联网加载数据    
            getListDataFromNet(page.num, page.size, function(data)\{    
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;    
                //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;    
                console.log("page.num="+page.num+", page.size="+page.size+", data.length="+data.length + ", totalCount" + totalCount);   
                    
                //方法二(推荐): 后台接口有返回列表的总数据量 totalSize    
                mescroll.endBySize(data.length, totalCount); //必传参数(当前页的数据个数, 总数据量)    
                    
                //设置列表数据    
                setListData(data, true);    
            \}, function()\{    
                //联网失败的回调,隐藏上拉加载的状态    
                mescroll.endErr();    
            \});    
        \}

/\*设置列表数据\*/    
        function setListData(data, isAppend) \{    
            for (var i = 0; i < data.length; i++) \{    
                var newObj = data\[i\];    
                $("\#listDiv").append(newObj);    
            \}    
        \}

/\*联网加载列表数据\*/    
        var downIndex=0;    
        function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) \{    
            //延时一秒,模拟联网    
               setTimeout(function () \{    
                try\{    
                    var newArr = \[\];    
                    newArr = loadMoreNew();    
                    successCallback&&successCallback(newArr);    
                \}catch(e)\{    
                    //联网失败的回调    
                    errorCallback&&errorCallback();    
                \}    
               \},2000)    
        \}    
            
        //禁止PC浏览器拖拽图片,避免与下拉刷新冲突;如果仅在移动端使用,可删除此代码    
        document.οndragstart=function() \{return false;\}    
    \});    
</script>

OK到此，整个过程结束