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

使用方法

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

2. 拷貝以下布局結構 :

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

//列表內容,如:

• 列表數據

?...

3. 創建mescroll對象 :var?mescroll?=?new?MeScroll("mescroll",?{?//第一個參數"mescroll"對應上面布局結構div的id

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

//解析:?down.callback默認調用mescroll.resetUpScroll(),而resetUpScroll會將page.num=1,再觸發up.callback

down:?{

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

},

up:?{

callback:?upCallback?//上拉加載的回調

}

});

4. 處理回調 ://下拉刷新的回調

function?downCallback()?{

$.ajax({

url:?'xxxxxx',

success:?function(data)?{

//聯網成功的回調,隱藏下拉刷新的狀態;

mescroll.endSuccess();?//無參

//設置數據

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

},

error:?function(data)?{

//聯網失敗的回調,隱藏下拉刷新的狀態

mescroll.endErr();

}

});

}

//上拉加載的回調?page?=?{num:1,?size:10};?num:當前頁?默認從1開始,?size:每頁數據條數,默認10

function?upCallback(page)?{

$.ajax({

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

success:?function(data)?{

//聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;

//參數data.length:當前頁的數據總數

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

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

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

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

mescroll.endSuccess(data.length);

//設置列表數據

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

},

error:?function(e)?{

//聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態

mescroll.endErr();

}

});

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。