溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)Node.js+ES6+dropload.js如何實(shí)現(xiàn)移動端下拉加載的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運(yùn)行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。
1.Node+express -- 服務(wù)搭建
由于該demo是在服務(wù)器端實(shí)現(xiàn)，所以需要通過npm包引入express模塊，用來搭建簡易服務(wù)。
1.官網(wǎng)下載node,npm包管理工具會同時(shí)自動下載。
2.命令行輸入：npm install express -g //安裝express模塊
3.在項(xiàng)目中新建server.js //起服務(wù)
//server.js代碼部分
require("express")().get("*",function(req,res){
res.sendFile(__dirname + req.path);
}).listen(8888,function(){//訪問demo的端口為8888
console.log(" 服務(wù)已啟動")
})
//這樣，一個(gè)簡易的瀏覽器端服務(wù)就搭建起來了。2.新建文件保存數(shù)據(jù)--count.json
在項(xiàng)目目錄下面建立一個(gè)data文件夾，里面新建一個(gè)count.json(名字可任意起)
//data.json代碼部分
[{
"month":"3月",
"record":[
{
"action":"充值",
"pay":"12546.00",
"balance":"3445.00",
"time":"2015-03-15 15:03"
},
.........//這里省略了部分?jǐn)?shù)據(jù)
{
"action":"充值",
"pay":"2546.00",
"balance":"3444.00",
"time":"2015-03-15 15:03"
},
{
"action":"充值",
"pay":"3546.00",
"balance":"343.00",
"time":"2015-03-15 15:03"
},
{
"action":"騰訊游戲",
"pay":"1846.00",
"balance":"344.00",
"time":"2015-03-15 15:03"
}
]
},
{
"month":"4月",
"record":[
{
"action":"充值",
"pay":"88888.00",
"balance":"3445.00",
"time":"2015-03-15 15:03"
},
..........//省略數(shù)據(jù)
{
"action":"充值",
"pay":"99999.00",
"balance":"3444.00",
"time":"2015-03-15 15:03"
},
{
"action":"充值",
"pay":"354346.00",
"balance":"343.00",
"time":"2015-03-15 15:03"
},
{
"action":"充值",
"pay":"18463242.00",
"balance":"344.00",
"time":"2015-03-15 15:03"
}
]
},
{
"month":"5月",
"record":[
{
"action":"充值",
"pay":"2323232.00",
"balance":"3445.00",
"time":"2015-03-15 15:03"
},
{
"action":"充值",
"pay":"324234.00",
"balance":"3444.00",
"time":"2015-03-15 15:03"
},
..........//省略數(shù)據(jù)
{
"action":"充值",
"pay":"1846.00",
"balance":"344.00",
"time":"2015-03-15 15:03"
}
]
}
]
//該文件中的數(shù)據(jù)，就是即將渲染在頁面中的數(shù)據(jù)3.HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的賬戶</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">//別忘記加上移動端這個(gè)屬性 <link rel="stylesheet" type="text/css" href="css/dropload.css" rel="external nofollow" >//dropload.css為下拉加載樣式 <link rel="stylesheet" type="text/css" href="css/wechat.css" rel="external nofollow" >//wechat.css文件為自己定義樣式的文件 </head> <body> <!-- 賬戶頭部 --> <header> <p class="count">現(xiàn)金賬戶（元）</p> <h4 class="countMoney">8888.88</h4> </header> <!-- 月份區(qū)域 --> <section class="monthArea"> <section class="month monthselect">3月</section>//monthselect為剛進(jìn)入頁面時(shí)為該section添加樣式 <section class="month">4月</section> <section class="month">5月</section> </section> <!-- 賬戶詳情 --> <footer> <section class="detail"> <ul class="forDetail"> </ul> <ul class="forDetail"> </ul> <ul class="forDetail"> </ul> </section> </footer> </body> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/dropload.js"></script> <script src="js/wechat.js"></script>//頁面js邏輯代碼 </html>
4.wechat.js
/*
* @Author: rui.wei
* @Date: 2017-04-26 21:23:44
* @Last Modified by: yp-tc-m-2478
* @Last Modified time: 2017-05-31 17:02:54
*/
$(function(){
var shouyeData=[],tabLenghtArray=[];
var firstLength,secondLenth,thirdLength;//頁面中3月、4月、5月數(shù)據(jù)的長度
$.get("http://localhost:8888/data/count.json",function(response) {
shouyeData = response;//把獲取到的數(shù)據(jù)賦值給先前定義的變量，方便后續(xù)操控?cái)?shù)據(jù)
firstLength = response[0].record.length;//3月數(shù)據(jù)長度
secondLenth = response[1].record.length;//4月數(shù)據(jù)長度
thirdLength = response[2].record.length;//5月數(shù)據(jù)長度
tabLenghtArray = [firstLength, secondLenth, thirdLength];//該變量用來保存每個(gè)月份的數(shù)據(jù)長度
});
var itemIndex = 0;//進(jìn)入頁面默認(rèn)顯示3月數(shù)據(jù)
var tabLoadEndArray = [false, false, false];//用來標(biāo)記當(dāng)前月份數(shù)據(jù)是否全部渲染完畢
var tabScroolTopArray = [0, 0, 0];//用來記錄當(dāng)前月份模塊滑動的距離
// dropload
var dropload = $('.detail').dropload({
scrollArea: window,//滑動區(qū)域?yàn)閣indow
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">上拉加載更多</div>',//加載更多的樣式定義
domLoad: '<div class="dropload-load"><span class="loading"></span>加載中...</div>',//加載中的樣式定義
domNoData: '<div class="dropload-noData">已無數(shù)據(jù)</div>'//沒有數(shù)據(jù)樣式定義
},
loadDownFn: function (me) {//向上滑動時(shí)觸發(fā)該函數(shù)
setTimeout(function () {
if (tabLoadEndArray[itemIndex]) {//當(dāng)前月份模塊的數(shù)據(jù)已經(jīng)全部加載完畢時(shí)，執(zhí)行以下操作
me.resetload();//重新加載,每次數(shù)據(jù)插入，必須重置
me.lock();//鎖定
me.noData();//無數(shù)據(jù)
me.resetload();
return;
}
var result = '';//定義變量值，下面用來保存當(dāng)前月份數(shù)據(jù)
for (var index = 0; index <5; index++) {//index值用來控制頁面滑動時(shí)一次性加載幾個(gè)數(shù)據(jù)
if (tabLenghtArray[itemIndex] > 0) {//當(dāng)前月份數(shù)據(jù)--到0時(shí)，改變狀態(tài)為true,即為不可加載數(shù)據(jù)
tabLenghtArray[itemIndex]--;
} else {
tabLoadEndArray[itemIndex] = true;
break;
}
if (itemIndex == 0) {//3月份時(shí)數(shù)據(jù)result,這里的13-[tabLenghtArray[itemIndex]]是為了將數(shù)據(jù)正著渲染在頁面上，之前3月份的數(shù)據(jù)長度為14，這里需要減1
var obj = shouyeData[0].record[13-[tabLenghtArray[itemIndex]]];
result += `//模板字符串解析對象${}
<li class="detailLi">
<p class="detailp1"><span class="fl">${obj.action}</span><span class="fr weight">${obj.pay}</span></p>
<p class="detailp2"><span class="fl">余額：${obj.balance}</span><span class="fr">${obj.time}</span></p>
</li>
`
} else if (itemIndex == 1) {
var obj = shouyeData[1].record[6-[tabLenghtArray[itemIndex]]];
result +=`
<li class="detailLi">
<p class="detailp1"><span class="fl">${obj.action}</span><span class="fr weight">${obj.pay}</span></p>
<p class="detailp2"><span class="fl">余額：${obj.balance}</span><span class="fr">${obj.time}</span></p>
</li>
`
} else if (itemIndex == 2) {
var obj = shouyeData[2].record[6-[tabLenghtArray[itemIndex]]];
result +=`
<li class="detailLi">
<p class="detailp1"><span class="fl">${obj.action}</span><span class="fr weight">${obj.pay}</span></p>
<p class="detailp2"><span class="fl">余額：${obj.balance}</span><span class="fr">${obj.time}</span></p>
</li>
`
}
}
$('.forDetail').eq(itemIndex).append(result);//將數(shù)據(jù)渲染進(jìn)對應(yīng)的月份模塊
me.resetload();
}, 500);
}
});
//下面這個(gè)代碼是控制點(diǎn)擊對應(yīng)月份時(shí),顯示對應(yīng)月份的數(shù)據(jù)和tab切換效果
$('.monthArea .month').on('click', function () {
tabScroolTopArray[itemIndex] = $(window).scrollTop();
var $this = $(this);
itemIndex = $this.index();
$(window).scrollTop(tabScroolTopArray[itemIndex]);
$(this).addClass('monthselect').siblings().removeClass('monthselect');
$('.tabHead .border').css('left', $(this).offset().left + 'px');
$('.forDetail').eq(itemIndex).show().siblings('.forDetail').hide();
if (!tabLoadEndArray[itemIndex]) {
dropload.unlock();
dropload.noData(false);
} else {
dropload.lock('down');
dropload.noData();
}
dropload.resetload();
});
})5.啟動服務(wù)
在命令行進(jìn)入當(dāng)前文件夾，輸入node server.js啟動服務(wù)。再在瀏覽器地址欄中輸入localhost:8888/wechat.html,即可看到下拉加載效果已經(jīng)實(shí)現(xiàn)。
感謝各位的閱讀！關(guān)于“Node.js+ES6+dropload.js如何實(shí)現(xiàn)移動端下拉加載”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼