mescroll上拉加载的实现
html部分
<div id="mescroll" class="mescroll">
? ? <ul class="recordlist news-list" id="newsList">
? ? ? ? <!-- <li> -->
? ? ? ? ? ? <!-- <div class="recordimg">
? ? ? ? ? ? ? ? <i class="iconfont"></i>
? ? ? ? ? ? </div> -->
? ? ? ? ? ? <!-- <div class="list-items">
? ? ? ? ? ? ? ? <p>充值時間</p>
? ? ? ? ? ? ? ? <p>2017-12-22</p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="list-items">
? ? ? ? ? ? ? ? <p>卡號</p>
? ? ? ? ? ? ? ? <p>456123456789456</p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="list-items">
? ? ? ? ? ? ? ? <p>微信充值</p>
? ? ? ? ? ? ? ? <p>2017-12-22</p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="list-items">
? ? ? ? ? ? ? ? <p>充值金額</p>
? ? ? ? ? ? ? ? <p>100</p>
? ? ? ? ? ? </div>
? ? ? ? </li> -->
? ? </ul>
</div>
css部分
.mescroll{
? ? ? ? position: fixed;
? ? ? ? top: 103px;
? ? ? ? left: 0;
? ? ? ? bottom: 0;
? ? ? ? height: auto; /*如設置bottom:50px,則需height:auto才能生效*/
? ? }
js 部分
var mescroll = new MeScroll("mescroll", {
? ? ? ? ? ? ? ? up: {
? ? ? ? ? ? ? ? ? ? callback: upCallback, //上拉加載的回調
? ? ? ? ? ? ? ? ? ? isBounce: false,
? ? ? ? ? ? ? ? ? ? //以下是一些常用的配置,當然不寫也可以的.
? ? ? ? ? ? ? ? ? ? page: {
? ? ? ? ? ? ? ? ? ? ? ? num: 0, //當前頁 默認0,回調之前會加1; 即callback(page)會從1開始
? ? ? ? ? ? ? ? ? ? ? ? size: 2 //每頁數據條數,默認10
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
? ? ? ? ? ? ? ? ? ? noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大于5才顯示無更多數據;
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 這就是為什么無更多數據有時候不顯示的原因.
? ? ? ? ? ? ? ? ? ? toTop: {
? ? ? ? ? ? ? ? ? ? ? ? //回到頂部按鈕
? ? ? ? ? ? ? ? ? ? ? ? src: "./images/mescroll-totop.png", //圖片路徑,默認null,支持網絡圖
? ? ? ? ? ? ? ? ? ? ? ? offset: 1000 //列表滾動1000px才顯示回到頂部按鈕 ?
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? /*上拉加載的回調 page = {num:1, size:10}; num:當前頁 從1開始, size:每頁數據條數 */
? ? ? ? ? ? function upCallback(page){
? ? ? ? ? ? ? ? //聯網加載數據
? ? ? ? ? ? ? ? getListDataFromNet(page.num, page.size, function(curPageData){
? ? ? ? ? ? ? ? ? ? //聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;
? ? ? ? ? ? ? ? ? ? //mescroll會根據傳的參數,自動判斷列表如果無任何數據,則提示空;列表無下一頁數據,則提示無更多數據;
? ? ? ? ? ? ? ? ? ? console.log("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);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //提示:curPageData.length必傳的原因:
? ? ? ? ? ? ? ? ? ? // 1.判斷是否有下一頁的首要依據: 當傳的值小于page.size時,則一定會認為無更多數據.
? ? ? ? ? ? ? ? ? ? // 2.比傳入的totalPage, totalSize, hasNext具有更高的判斷優先級
? ? ? ? ? ? ? ? ? ? // 3.使配置的noMoreSize生效
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //設置列表數據
? ? ? ? ? ? ? ? ? ? // setListData(curPageData, true);
? ? ? ? ? ? ? ? }, function(){
? ? ? ? ? ? ? ? ? ? //聯網失敗的回調,隱藏下拉刷新和上拉加載的狀態;
? ? ? ? ? ? ? ? ? ? mescroll.endErr();
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? /*設置列表數據*/
? ? ? ? ? ? function setListData(curPageData, isAppend) {
? ? ? ? ? ? ? ? console.log(curPageData);
? ? ? ? ? ? ? ? var listDom=document.getElementById("newsList");
? ? ? ? ? ? ? ? for (var i = 0; i < curPageData.length; i++) {
? ? ? ? ? ? ? ? ? ? var newObj=curPageData[i];
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? var str='';
? ? ? ? ? ? ? ? ? ? str+='<div class="list-items">';
? ? ? ? ? ? ? ? ? ? str+='<p>充值時間</p>';
? ? ? ? ? ? ? ? ? ? str+='<p>'+newObj.starttime+'</p>';
? ? ? ? ? ? ? ? ? ? str+='</div>';
? ? ? ? ? ? ? ? ? ? str+='<div class="list-items">';
? ? ? ? ? ? ? ? ? ? str+='<p>充值卡號</p>';
? ? ? ? ? ? ? ? ? ? str+='<p>'+newObj.device_id+'</p>';
? ? ? ? ? ? ? ? ? ? str+='</div>';
? ? ? ? ? ? ? ? ? ? // str+='<div class="list-items">';
? ? ? ? ? ? ? ? ? ? // str+='<p>微信充值</p>';
? ? ? ? ? ? ? ? ? ? // str+='<p>2017-12-22</p>';
? ? ? ? ? ? ? ? ? ? // str+='</div>';
? ? ? ? ? ? ? ? ? ? str+='<div class="list-items">';
? ? ? ? ? ? ? ? ? ? str+='<p>充值金額</p>';
? ? ? ? ? ? ? ? ? ? str+='<p>'+newObj.order_money+'</p>';
? ? ? ? ? ? ? ? ? ? str+='</div>';
? ? ? ? ? ? ? ? ? ? var liDom=document.createElement("li");
? ? ? ? ? ? ? ? ? ? liDom.innerHTML=str;
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? if (isAppend) {
? ? ? ? ? ? ? ? ? ? ? ? listDom.appendChild(liDom);//加在列表的后面,上拉加載
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? // 獲取url參數
? ? ? ? ? ? function GetRequest() { ?
? ? ? ? ? ? ? ?var url = location.search; //獲取url中"?"符后的字串 ?
? ? ? ? ? ? ? ?var theRequest = new Object(); ?
? ? ? ? ? ? ? ?if (url.indexOf("?") != -1) { ?
? ? ? ? ? ? ? ? ? var str = url.substr(1); ?
? ? ? ? ? ? ? ? ? strs = str.split("&"); ?
? ? ? ? ? ? ? ? ? for(var i = 0; i < strs.length; i ++) { ?
? ? ? ? ? ? ? ? ? ? ?theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); ?
? ? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ?} ?
? ? ? ? ? ? ? ?return theRequest; ?
? ? ? ? ? ? }
? ? ? ? ? ? /*聯網加載列表數據
? ? ? ? ? ? ?在您的實際項目中,請參考官方寫法: http://www.mescroll.com/api.html#tagUpCallback
? ? ? ? ? ? ?請忽略getListDataFromNet的邏輯,這里僅僅是在本地模擬分頁數據,本地演示用
? ? ? ? ? ? ?實際項目以您服務器接口返回的數據為準,無需本地處理分頁.
? ? ? ? ? ? ?* */
? ? ? ? ? ? var downIndex=0;
? ? ? ? ? ? function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
? ? ? ? ? ? ? ? var flag = true
? ? ? ? ? ? ? ? //延時一秒,模擬聯網
? ? ? ? ? ? ? ? setTimeout(function () {
? ? ? ? ? ? ? ? ? ? var url="http://www.shawy.cn/Mobile/Userapi/buy_order_list";
? ? ? ? ? ? ? ? ? ? var ka_code = GetRequest().device_id;
? ? ? ? ? ? ? ? ? ? // console.log(ka_code)
? ? ? ? ? ? ? ? ? ? try{
? ? ? ? ? ? ? ? ? ? ? ? var newArr=[];
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(flag == true){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? url: url+'?page=' + pageNum + "&page_size=" + pageSize + '&device_id='+ ka_code, //如何修改page.num從0開始 ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? success: function(curPageData) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var curPageData = JSON.parse(curPageData);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // pageSize = curPageData.length;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // console.log(curPageData);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //此處模擬上拉加載返回的數據
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // for (var i = 0; i < curPageData.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? var newObj=curPageData[i];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? if(i==curPageData.length) break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? ? ?newArr.push(newObj);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (var i = 0; i < pageSize; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(curPageData.length<pageSize){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var newObj=curPageData[i];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? newArr.push(newObj);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? mescroll.endSuccess(curPageData.length);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setListData(curPageData, true);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //聯網成功的回調
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? successCallback&&successCallback(newArr);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }catch(e){
? ? ? ? ? ? ? ? ? ? ? ? //聯網失敗的回調
? ? ? ? ? ? ? ? ? ? ? ? errorCallback&&errorCallback();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },1000)
? ? ? ? ? ? }
總結
以上是生活随笔為你收集整理的mescroll上拉加载的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mpvue微信小程序http请求-fly
- 下一篇： 微信小程序使用wxParse解析html