插件描述：mescroll精致的下拉刷新和上拉加載js框架.原生js, 支持vue, 不依賴jquery, zepto, 比iScroll,dropload精簡強大; 一套代碼多端運行: 完美運行于android,iOS,手機各瀏覽器,兼容PC端主流瀏覽器; 參數(shù)自由搭配,隨心定制,輕松拓展; 主流APP案例,豐富經(jīng)典

使用方法

1. 下載并引用 mescroll.min.css , mescroll.min.js

2. 拷貝以下布局結(jié)構(gòu) :

//id可以改,而"mescroll"的class不能刪

//列表內(nèi)容,如:

• 列表數(shù)據(jù)

?...

3. 創(chuàng)建mescroll對象 :var?mescroll?=?new?MeScroll("mescroll",?{?//第一個參數(shù)"mescroll"對應(yīng)上面布局結(jié)構(gòu)div的id

//如果您的下拉刷新是重置列表數(shù)據(jù),那么down完全可以不用配置,具體用法參考第一個基礎(chǔ)案例

//解析:?down.callback默認(rèn)調(diào)用mescroll.resetUpScroll(),而resetUpScroll會將page.num=1,再觸發(fā)up.callback

down:?{

callback:?downCallback?//下拉刷新的回調(diào),別寫成downCallback(),多了括號就自動執(zhí)行方法了

},

up:?{

callback:?upCallback?//上拉加載的回調(diào)

}

});

4. 處理回調(diào) ://下拉刷新的回調(diào)

function?downCallback()?{

$.ajax({

url:?'xxxxxx',

success:?function(data)?{

//聯(lián)網(wǎng)成功的回調(diào),隱藏下拉刷新的狀態(tài);

mescroll.endSuccess();?//無參

//設(shè)置數(shù)據(jù)

//setXxxx(data);//自行實現(xiàn)?TODO

},

error:?function(data)?{

//聯(lián)網(wǎng)失敗的回調(diào),隱藏下拉刷新的狀態(tài)

mescroll.endErr();

}

});

}

//上拉加載的回調(diào)?page?=?{num:1,?size:10};?num:當(dāng)前頁?默認(rèn)從1開始,?size:每頁數(shù)據(jù)條數(shù),默認(rèn)10

function?upCallback(page)?{

$.ajax({

url:?'xxxxxx?num='?+?page.num?+?"&size="?+?page.size,?//如何修改page.num從0開始??

success:?function(data)?{

//聯(lián)網(wǎng)成功的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);

//參數(shù)data.length:當(dāng)前頁的數(shù)據(jù)總數(shù)

//mescroll會根據(jù)data.length自動判斷列表如果無任何數(shù)據(jù),則提示空,顯示empty配置的內(nèi)容;

//列表如果無下一頁數(shù)據(jù),則提示無更多數(shù)據(jù),(注意noMoreSize的配置)

//如果你需要強制顯示無更多數(shù)據(jù),則mescroll.endSuccess(0),注意noMoreSize的配置

//如果不傳data.length,則僅隱藏下拉刷新的狀態(tài)

mescroll.endSuccess(data.length);

//設(shè)置列表數(shù)據(jù)

//setListData(data);//自行實現(xiàn)?TODO

},

error:?function(e)?{

//聯(lián)網(wǎng)失敗的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài)

mescroll.endErr();

}

});

}

總結(jié)

以上是生活随笔為你收集整理的php mescroll,mescroll下拉刷新和上拉加载js框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。