當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

mescroll上拉加载的实现

發(fā)布時間：2023/12/15 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 mescroll上拉加载的实现小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

html部分

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, //上拉加載的回調(diào)
? ? ? ? ? ? ? ? ? ? isBounce: false,
? ? ? ? ? ? ? ? ? ? //以下是一些常用的配置,當然不寫也可以的.
? ? ? ? ? ? ? ? ? ? page: {
? ? ? ? ? ? ? ? ? ? ? ? num: 0, //當前頁默認0,回調(diào)之前會加1; 即callback(page)會從1開始
? ? ? ? ? ? ? ? ? ? ? ? size: 2 //每頁數(shù)據(jù)條數(shù),默認10
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
? ? ? ? ? ? ? ? ? ? noMoreSize: 5, //如果列表已無數(shù)據(jù),可設置列表的總數(shù)量要大于5才顯示無更多數(shù)據(jù);
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 避免列表數(shù)據(jù)過少(比如只有一條數(shù)據(jù)),顯示無更多數(shù)據(jù)會不好看
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 這就是為什么無更多數(shù)據(jù)有時候不顯示的原因.
? ? ? ? ? ? ? ? ? ? toTop: {
? ? ? ? ? ? ? ? ? ? ? ? //回到頂部按鈕
? ? ? ? ? ? ? ? ? ? ? ? src: "./images/mescroll-totop.png", //圖片路徑,默認null,支持網(wǎng)絡圖
? ? ? ? ? ? ? ? ? ? ? ? offset: 1000 //列表滾動1000px才顯示回到頂部按鈕 ?
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });

? ? ? ? /*上拉加載的回調(diào) page = {num:1, size:10}; num:當前頁從1開始, size:每頁數(shù)據(jù)條數(shù) */
? ? ? ? ? ? function upCallback(page){
? ? ? ? ? ? ? ? //聯(lián)網(wǎng)加載數(shù)據(jù)
? ? ? ? ? ? ? ? getListDataFromNet(page.num, page.size, function(curPageData){
? ? ? ? ? ? ? ? ? ? //聯(lián)網(wǎng)成功的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
? ? ? ? ? ? ? ? ? ? //mescroll會根據(jù)傳的參數(shù),自動判斷列表如果無任何數(shù)據(jù),則提示空;列表無下一頁數(shù)據(jù),則提示無更多數(shù)據(jù);
? ? ? ? ? ? ? ? ? ? console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //方法一(推薦): 后臺接口有返回列表的總頁數(shù) totalPage
? ? ? ? ? ? ? ? ? ? //mescroll.endByPage(curPageData.length, totalPage); //必傳參數(shù)(當前頁的數(shù)據(jù)個數(shù), 總頁數(shù))
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //方法二(推薦): 后臺接口有返回列表的總數(shù)據(jù)量 totalSize
? ? ? ? ? ? ? ? ? ? //mescroll.endBySize(curPageData.length, totalSize); //必傳參數(shù)(當前頁的數(shù)據(jù)個數(shù), 總數(shù)據(jù)量)
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //方法三(推薦): 您有其他方式知道是否有下一頁 hasNext
? ? ? ? ? ? ? ? ? ? //mescroll.endSuccess(curPageData.length, hasNext); //必傳參數(shù)(當前頁的數(shù)據(jù)個數(shù), 是否有下一頁true/false)
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //方法四 (不推薦),會存在一個小問題:比如列表共有20條數(shù)據(jù),每頁加載10條,共2頁.如果只根據(jù)當前頁的數(shù)據(jù)個數(shù)判斷,則需翻到第三頁才會知道無更多數(shù)據(jù),如果傳了hasNext,則翻到第二頁即可顯示無更多數(shù)據(jù).
? ? ? ? ? ? ? ? ? ? // mescroll.endSuccess(curPageData.length);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //提示:curPageData.length必傳的原因:
? ? ? ? ? ? ? ? ? ? // 1.判斷是否有下一頁的首要依據(jù): 當傳的值小于page.size時,則一定會認為無更多數(shù)據(jù).
? ? ? ? ? ? ? ? ? ? // 2.比傳入的totalPage, totalSize, hasNext具有更高的判斷優(yōu)先級
? ? ? ? ? ? ? ? ? ? // 3.使配置的noMoreSize生效
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //設置列表數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? // setListData(curPageData, true);
? ? ? ? ? ? ? ? }, function(){
? ? ? ? ? ? ? ? ? ? //聯(lián)網(wǎng)失敗的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
? ? ? ? ? ? ? ? ? ? mescroll.endErr();
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? /*設置列表數(shù)據(jù)*/
? ? ? ? ? ? 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參數(shù)
? ? ? ? ? ? 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; ?
? ? ? ? ? ? }
? ? ? ? ? ? /*聯(lián)網(wǎng)加載列表數(shù)據(jù)
? ? ? ? ? ? ?在您的實際項目中,請參考官方寫法: http://www.mescroll.com/api.html#tagUpCallback
? ? ? ? ? ? ?請忽略getListDataFromNet的邏輯,這里僅僅是在本地模擬分頁數(shù)據(jù),本地演示用
? ? ? ? ? ? ?實際項目以您服務器接口返回的數(shù)據(jù)為準,無需本地處理分頁.
? ? ? ? ? ? ?* */
? ? ? ? ? ? var downIndex=0;
? ? ? ? ? ? function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
? ? ? ? ? ? ? ? var flag = true
? ? ? ? ? ? ? ? //延時一秒,模擬聯(lián)網(wǎng)
? ? ? ? ? ? ? ? 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);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //此處模擬上拉加載返回的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 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);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //聯(lián)網(wǎng)成功的回調(diào)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? successCallback&&successCallback(newArr);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }catch(e){
? ? ? ? ? ? ? ? ? ? ? ? //聯(lián)網(wǎng)失敗的回調(diào)
? ? ? ? ? ? ? ? ? ? ? ? errorCallback&&errorCallback();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },1000)
? ? ? ? ? ? }

總結

以上是生活随笔為你收集整理的mescroll上拉加载的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： mpvue微信小程序http请求-fly
下一篇： Silverlight 4 Tools中