在專案開發中使用了mescrolljs插件來做上拉加載下拉重繪效果，但是每次下拉重繪的時候資料都會重復加載，永遠也不會到底部，不知道是什么原因，特來求教。謝謝！
uj5u.com熱心網友回復：
URL請求需要帶引數uj5u.com熱心網友回復：
每次執行上拉加載的操作時 都要將現在的頁碼傳給后臺介面 獲取對應頁碼的資料即可uj5u.com熱心網友回復：
/* 聯網加載串列資料 page = {num:1, size:10}; num:當前頁 從1開始, size:每頁資料條數 */
function getListData(page) {
// 聯網加載資料
getListDataFromNet(pdType, page.num, page.size, word, function(
curPageData) {
// 聯網成功的回呼,隱藏下拉重繪和上拉加載的狀態;
// mescroll會根據傳的引數,自動判斷串列如果無任何資料,則提示空;串列無下一頁資料,則提示無更多資料;
// console.log("pdType="+pdType+", page.num="+page.num+",
// page.size="+page.size+",
// curPageData.length="+curPageData.length);
// 方法一(推薦): 后臺介面有回傳串列的總頁數 totalPage
// mescroll.endByPage(curPageData.length, totalPage);
// //必傳引數(當前頁的資料個數, 總頁數)
// 方法二(推薦): 后臺介面有回傳串列的總資料量 totalSize
// mescroll.endBySize(curPageData.length, totalSize);
// //必傳引數(當前頁的資料個數, 總資料量)
// 方法三(推薦): 您有其他方式知道是否有下一頁 hasNext
// mescroll.endSuccess(curPageData.length, hasNext);
// //必傳引數(當前頁的資料個數, 是否有下一頁true/false)
// 方法四
// (不推薦),會存在一個小問題:比如串列共有20條資料,每頁加載10條,共2頁.如果只根據當前頁的資料個數判斷,則需翻到第三頁才會知道無更多資料,如果傳了hasNext,則翻到第二頁即可顯示無更多資料.
mescroll.endSuccess();
// 提示:curPageData.length必傳的原因:
// 1.判斷是否有下一頁的首要依據: 當傳的值小于page.size時,則一定會認為無更多資料.
// 2.比傳入的totalPage, totalSize, hasNext具有更高的判斷優先級
// 3.使配置的noMoreSize生效
// 設定串列資料
setListData(curPageData);
}, function() {
// 聯網失敗的回呼,隱藏下拉重繪和上拉加載的狀態;
mescroll.endErr();
});
}
function setListData(curPageData) {
//省略
}
function getListDataFromNet(pdType, pageNum, pageSize, word,
successCallback, errorCallback) {
$.ajax({
type : 'post',
url : xxxxxx?pdType=' + pdType + '&pageNum='
+ pageNum + '&pageSize=' + pageSize + '&name=' + word,
dataType : 'json',
success : function(data) {
var total = data.total;
data = data.rows;
var listData = [];
//省略
mescroll.endSuccess(data.length);
mescroll.endBySize(data.length, total);
mescroll.endByPage(data.length, pageNum);
successCallback(listData);
// 回呼
},
error : errorCallback
});
}
/* 設定串列資料 */
function setListData(curPageData, isAppend) {
var listDom = document.getElementById("newsList");
for (var i = 0; i < curPageData.length; i++) {
var newObj = curPageData[i];
var str = '<p>' + newObj.title + '</p >';
str += '<p class="new-content">' + newObj.content + '</p >';
var liDom = document.createElement("li");
liDom.innerHTML = str;
if (isAppend && curPageData.length == page.size) {
listDom.appendChild(liDom);// 加在串列的后面,上拉加載
} else {
listDom.insertBefore(liDom, listDom.firstChild);// 加在串列的前面,下拉重繪
}
}
}
var mescroll = new MeScroll("mescroll", {
// 上拉加載的配置項
up : {
callback : getListData, // 上拉回呼,此處可簡寫; 相當于 callback: function (page)
isBounce : true, // 此處禁止ios回彈,決議(務必認真閱讀,特別是最后一點):
auto:true, // http://www.mescroll.com/qa.html#q10
noMoreSize : 4, // 如果串列已無資料,可設定串列的總數量要大于半頁才顯示無更多資料;避免串列資料過少(比如只有一條資料),顯示無更多資料會不好看;
// 默認5
empty : {
// icon: "../res/img/mescroll-empty.png", //圖示,默認null
// tip: "暫無相關資料~", //提示
/*
* btntext: "去逛逛 >", //按鈕,默認""
*//*
* btnClick: function(){//點擊按鈕的回呼,默認null
* alert("點擊了按鈕,具體邏輯自行實作"); }
*/
},
htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
clearEmptyId : "dataList", // 相當于同時設定了clearId和empty.warpId;
// 簡化寫法;默認null; 注意vue中不能配置此項
toTop : { // 配置回到頂部按鈕
src : "../res/img/mescroll-totop.png", // 默認滾動到1000px顯示,可配置offset修改
// offset : 1000
},
lazyLoad : {
use : true
// 是否開啟懶加載,默認false
}
}
});
uj5u.com熱心網友回復：
mybatis的配置項 pagehelper.reasonable = false轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/72320.html
標籤：JavaScript
上一篇：java web 讀取資料庫blob圖片，測驗顯示X，求問！
下一篇：各位大神，請問前端和后端通過介面請求的時候，使用jquery ajax（非jsonp）不會產生跨域，使用axios會跨域呢?