????已經(jīng)有好久沒有更新文章了巴帮，最近做的東西也不算多，只是沒有時(shí)間更新文章垃沦，今天繼續(xù)弄個(gè)給小白看的文章用押，一般的移動(dòng)端搜索結(jié)果頁或者那種分頁加載的頁面需要用的，上拉無限加載數(shù)據(jù)池充，不知道這個(gè)題目對(duì)不對(duì)，大家看了就知道是不是自己需要的東西了坑匠。
Mar-26-2018 14-35-30.gif
????下面直接說完成過程吧卧惜，這個(gè)可以說是非常簡(jiǎn)單的一個(gè)小功能了咽瓷，對(duì)于小白來說也能一眼就能看明白的，當(dāng)然茅姜，要是有更好的方法匈睁，希望大家也跟我說下。這個(gè)功能雖然胀蛮，不過也是上傳到github上了糯钙，覺得看完還沒懂得可以去看看，地址是InfiniteLoading
第一步：構(gòu)建頁面框架
????這一步很簡(jiǎn)單再榄，一般自己的項(xiàng)目都會(huì)有自己的設(shè)計(jì)享潜，我就直接寫一個(gè)簡(jiǎn)單粗糙的列表頁。html部分是：
<div class="nav">
上拉分頁無限加載
</div>
<!--顯示的大概樣子-->
<div class="container">
<div class="lineItem">1</div>
<div class="lineItem">2</div>
<div class="lineItem">3</div>
<div class="lineItem">4</div>
<div class="lineItem">5</div>
<div class="lineItem">6</div>
<div class="lineItem">7</div>
<div class="lineItem">8</div>
<div class="lineItem">9</div>
<div class="lineItem">10</div>
<div class="lineItem">11</div>
<div class="lineItem">12</div>
<div class="lineItem">13</div>
<div class="spinner">加載中疾就。猬腰。猜敢。</div>
<div class="spinner">- 數(shù)據(jù)已經(jīng)加載到底 -</div>
</div>
css部分是這樣的：
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 100vw;
height: calc(100vh - 44px);
}
.nav{
width: 100vw;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 20px;
}
.lineItem{
width: 100%;
height: 100px;
margin-top: 10px;
background-color: lightgray;
line-height: 100px;
text-align: left;
font-size: 12px;
overflow: hidden;
}
.spinner{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 16px;
background-color: lightcyan;
margin-top: 10px;
}
</style>
寫完顯示出來的樣子是下圖：
1
2
第二步：編寫邏輯部分
????我這邊引入了jquery鼠冕，大家用js寫的話，部分地方有點(diǎn)差異懈费，不過都沒啥區(qū)別楞捂。大家注意下，這塊我用的ajax請(qǐng)求的url是公司的寨闹，所以就拿掉了繁堡，大家替換上各自項(xiàng)目的url和請(qǐng)求數(shù)據(jù)就行。
//聲明部分變量
var pageNum = 1;//頁碼
var pageSize = 10;//每頁多少條數(shù)據(jù)
var infinite = true;//防止不停調(diào)接口加載新數(shù)據(jù),false的時(shí)候就不能請(qǐng)求接口
var count = 0;//總數(shù),判斷是否已經(jīng)加載到底了
var dataCache = [];//數(shù)據(jù)緩存闻牡，根據(jù)接口不同情況绳矩，可以考慮不用這個(gè)。
//請(qǐng)求方法
function sendRequest(num){
var sendData = {
//其它請(qǐng)求參數(shù)
pageNum:num,
pageSize:pageSize
};
if(infinite == true){
//只有infinite是true的時(shí)候才可以請(qǐng)求接口
infinite = false;
$.ajax({
type: "POST",
url: " 你自己的url ",
data:sendData,
dataType: 'json',
success: function (data) {
console.log(data);
if(data.code == 200 && data.data){
count = data.data.count ? data.data.count:0;
if(data.data.products && data.data.products.length != 0){
setPage(data.data.products);//單獨(dú)的拼接html,渲染頁面的方法割以。
}else{
//這邊處理當(dāng)數(shù)據(jù)為空的時(shí)候,并且頁數(shù)為第一頁的時(shí)候,頁面應(yīng)該有相應(yīng)的顯示
// 比如暫無數(shù)據(jù)列表之類的文案,背景之類的严沥。
//并且會(huì)有種可能就是在加載到部分頁數(shù)之后,請(qǐng)求回來的數(shù)據(jù)為空,頁面顯示也是有相應(yīng)的變化
if(pageNum == 1){
}else{
}
}
//在頁面渲染之后,此時(shí)的數(shù)字加1,為了下一次的加載
pageNum = data.data.pageNum + 1;
}else{
//接口返回部分code不正確的時(shí)候,頁面應(yīng)有相應(yīng)的顯示
console.log(data.content);
}
//設(shè)置可以繼續(xù)請(qǐng)求接口中姜。
infinite = true;
},
error: function (err) {
infinite = true;
console.log('系統(tǒng)異常');
}
});
}else{
infinite = true;
}
}
sendRequest(pageNum);
//渲染頁面方法
function setPage(data){
console.log(data);
$(".spinner").remove();//移除加載條
for(var i = 0;i < data.length;i++){
/*這邊也可以做一些緩存數(shù)據(jù)的操作,記住一些數(shù)據(jù),然后進(jìn)行一些別的操作,比如說切換tab的時(shí)候,不刷新頁面渲染頁面
也可以根據(jù)不同接口返回的數(shù)據(jù)來做判斷是否數(shù)據(jù)加載到底丢胚。我用的接口不支持返回?cái)?shù)量,所以就用這種方式來判斷*/
dataCache.push(data[i]);//將數(shù)據(jù)添加緩存數(shù)組中,適合數(shù)據(jù)量少的時(shí)候,不過數(shù)據(jù)量大的時(shí)候也可以用
//拼接html,渲染頁面
var html = setHtmlModel(data[i]);
$(".container").append(html);//添加html
}
//判斷是否加載到底,如果還有數(shù)據(jù)的話,就直接顯示加載中,如果沒有數(shù)據(jù)的話,就直接顯示加載到底
//這部分的樣式需要各自項(xiàng)目自己定義,我這邊就只做粗糙的顯示
var loadHtml = '';
if(count > dataCache.length){
loadHtml = '<div class="spinner">加載中。奥溺。骨宠。</div>';
}else{
loadHtml = '<div class="spinner">- 數(shù)據(jù)已經(jīng)加載到底 -</div>';
}
$(".container").append(loadHtml);
}
//拼接html方法,這邊的html因?yàn)樘?jiǎn)單,所以這塊看起來有點(diǎn)多余,在部分拼接html復(fù)雜的情況下,這樣寫可以看著好看點(diǎn),修改添加的時(shí)候也方便點(diǎn)
function setHtmlModel(data){
var html = '';
html += '<div class="lineItem">'+data.name+'</div>';
return html;
}
????這部分的東西基本上就是請(qǐng)求數(shù)據(jù)层亿，渲染頁面，添加加載框或者加載到底的顯示方灾，不過最重要的部分無限加載這塊還沒有添加上去碌更，所以此時(shí)你翻來覆去只能請(qǐng)求一次。
第三步：添加自動(dòng)加載的方法
//自動(dòng)加載新數(shù)據(jù),當(dāng)滾輪滾到離頁面下面一段距離的時(shí)候,就自動(dòng)更新數(shù)據(jù),請(qǐng)求接口
$(function(){
$(window).scroll(function () {
//下面三個(gè)參數(shù)很重要,大家可以自行百度下具體的解釋,一般簡(jiǎn)單的無限滾動(dòng)加載都會(huì)用到這個(gè)
var scrollTop = $(this).scrollTop();//匹配元素的滾動(dòng)條的垂直位置
var scrollHeight = $(document).height();//匹配元素document的高度
var windowHeight = $(this).height();//匹配元素的高度
if(scrollHeight - scrollTop - windowHeight < 200 ){
//這邊多做一個(gè)判斷,如果還有剩下沒有加載的數(shù)據(jù)就進(jìn)行加載,如果沒有,就不做請(qǐng)求
if(count > dataCache.length){
sendRequest(0,0,pageNum);
infinite = false;
}
}
});
});
????走完這三步就完成了一個(gè)簡(jiǎn)單的自動(dòng)加載的列表頁了嘿棘。
說實(shí)話旭绒，寫前端也有段時(shí)間了挥吵，按道理來說應(yīng)該寫一點(diǎn)復(fù)雜點(diǎn)的東西，像這樣簡(jiǎn)單的東西隨隨便便都能找到忽匈，可能也是我學(xué)藝不精丹允，還在慢慢學(xué)習(xí)中，希望以后能給大家?guī)砀玫奈恼孪铀伞Ｓ惺裁磫栴}大家也可以跟我一起交流交流萎羔。
