用mescroll實現無限上拉增加數據，下拉刷新數據 (學習筆記)
阿新 • • 發佈：2018-12-04
back num desc des tar todo cti hdr index
最近自己做一個web app需要用到上拉查詢下頁數據，網上看了很多很多帖子，發現並不能快速的套用，總是會出現各種問題無法使用，於是無奈自己跑去看了官方api文檔，終於做了出來，至此做個筆記，以後用到可以直接復制粘貼套用，好了不廢話了，進入正題。
1.需要引用 mescroll.min.css , mescroll.min.js
這兩個文件可以去http://www.mescroll.com/load.html下載，
也可以選擇引用cdn：
// jsdelivr的CDN: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/mescroll.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/mescroll.min.js" charset="utf-8"></script>
2.添加以下布局(容納操作內容的容器)
<div id="mescroll" class="mescroll"> //id可以改,而"mescroll"的class不能刪 <div> //這個div不能刪,否則上拉加載的布局會錯位.(可以改成ul或者其他容器標簽) //內容...</div> </div>
3.在head中添加style固定mescroll的div高度. 推薦通過定位的方式,簡單快捷: (點此查看其他方法)
<style> .mescroll{ position: fixed; top: 44px; bottom: 0; height: auto; /*如設置bottom:50px,則需height:auto才能生效*/ } </style>
4. 創建mescroll對象(我是單獨建了一個js文件) :
var mescroll = new MeScroll("mescroll", { //第一個參數"mescroll"對應上面布局結構div的id //如果您的下拉刷新是重置列表數據,那麽down完全可以不用配置,具體用法參考第一個基礎案例 //解析: down.callback默認調用mescroll.resetUpScroll(),而resetUpScroll會將page.num=1,再觸發up.callback down: { auto:false,//是否在初始化完畢之後自動執行下拉回調callback; 默認true callback: downCallback, //下拉刷新的回調 }, up: { auto:true,//初始化完畢,是否自動觸發上拉加載的回調 isBoth: true, //上拉加載時,如果滑動到列表頂部是否可以同時觸發下拉刷新;默認false,兩者不可同時觸發; 這裏為了演示改為true,不必等列表加載完畢才可下拉; isBounce: false, //此處禁止ios回彈,解析(務必認真閱讀,特別是最後一點): http://www.mescroll.com/qa.html#q10 callback: upCallback, //上拉加載的回調 /*toTop:{ //配置回到頂部按鈕 src : "../res/img/mescroll-totop.png", //默認滾動到1000px顯示,可配置offset修改 //offset : 1000 }*/ page: { num: 0, //當前頁 默認0,回調之前會加1; 即callback(page)會從1開始 size: 5 //每頁數據條數,默認10 } } });
5. 處理回調 :
//下拉刷新的回調 function downCallback() { $.ajax({ url: ‘‘, success: function(data) { //聯網成功的回調,隱藏下拉刷新的狀態; mescroll.endSuccess(); //無參 //設置數據 //setXxxx(data);//自行實現 TODO }, error: function(data) { //聯網失敗的回調,隱藏下拉刷新的狀態 mescroll.endErr(); } }); } //上拉加載的回調 page = {num:1, size:5};（這裏size我在上面設置成5了，默認是10） num:當前頁 默認從1開始, size:每頁數據條數,默認10 function upCallback(page) { /* var pageIndex = page.num-1;*/ //若想從num=0開始，就把前面的註釋打開。 $.ajax({ url: ‘xxxxxxxx‘ + ‘?‘ + ‘pageNum=‘ + page.num + ‘&pageSize=‘ + page.size, dataType:‘json‘, type:‘GET‘, success: function(curPageData) { //方法二(推薦): 後臺接口有返回列表的總數據量 totalSize //必傳參數(當前頁的數據個數, 總數據量)
mescroll.endBySize(curPageData.shopList.length, curPageData.count);
//這裏面還有一堆方法，根據自己後端情況選擇
//聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;
//mescroll會根據傳的參數,自動判斷列表如果無任何數據,則提示空,顯示empty配置的內容;
//列表如果無下一頁數據,則提示無更多數據,(註意noMoreSize的配置)
//方法一(推薦): 後臺接口有返回列表的總頁數 totalPage
//必傳參數(當前頁的數據個數, 總頁數)
//mescroll.endByPage(curPageData.length, totalPage);
//方法二(推薦): 後臺接口有返回列表的總數據量 totalSize
//必傳參數(當前頁的數據個數, 總數據量)
//mescroll.endBySize(curPageData.length, totalSize);
//方法三(推薦): 您有其他方式知道是否有下一頁 hasNext
//必傳參數(當前頁的數據個數, 是否有下一頁true/false)
//mescroll.endSuccess(curPageData.length, hasNext);
//方法四 (不推薦),會存在一個小問題:比如列表共有20條數據,每頁加載10條,共2頁.
//如果只根據當前頁的數據個數判斷,則需翻到第三頁才會知道無更多數據
//如果傳了hasNext,則翻到第二頁即可顯示無更多數據.
//mescroll.endSuccess(curPageData.length);
//結束下拉刷新的 mescroll.endSuccess()無參.
//結束上拉加載 curPageData.length必傳的原因:
1.使配置的noMoreSize生效
2.判斷是否有下一頁的首要依據: 當傳的值小於page.size時,則一定會認為無更多數據.
比傳入的totalPage, totalSize, hasNext具有更高的判斷優先級
3.當傳的值等於page.size時,才會取totalPage, totalSize, hasNext判斷是否有下一頁
傳totalPage, totalSize, hasNext主要目的是避免方法四描述的小問題
//設置列表數據,自行實現，裏面寫你遍歷像前臺塞值過程 setListData(curPageData); }, error: function(e) { //聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態 mescroll.endErr(); } }); } //具體實現自行定義 function setListData(curPageData){ var html = ‘‘; //這裏，我後臺返回的是個map集合，所以遍歷店鋪列表，拼接出卡片集合，具體自行定義 curPageData.shopList.map(function(item, index) { html += ‘‘ + ‘<div class="withdrawals-panel card" data-shop-id="‘ + item.shopId + ‘">‘ + ‘<div class="groupby-img-panle "><a href="#"><img src="‘ + item.shopImg + ‘" class="am-img-responsive" /></a></div>‘ + ‘<div class="groupby-info-panle">‘ + ‘<h3>‘ + item.shopName + ‘</h3>‘ + ‘<p>‘ + item.shopDesc + ‘</p>‘ + ‘<p>‘ + new Date(item.lastEditTime).Format("yyyy-MM-dd") + ‘</p>‘ + ‘</div>‘ + ‘</div>‘; }); $(‘.list-div‘).append(html); }
至此功能已經實現，以此筆記 記錄使用過程。
用mescroll實現無限上拉增加數據，下拉刷新數據 (學習筆記)