列表滚动加载（静态）
作者：互联网
本地静态滚动加载
html:
<div class="ranking-content">
<div class="ranking-content__box" id="rankingList" data-page="1">
<a href="游戏详情.html" class="ranking-content__list">
<p class="l">1</p>
<div class="c">
<img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
<div class="c-info">
<p class="c-title">车祸模拟器</p>
<span class="c-score">9.2</span>
</div>
</div>
<div class="btn">启动</div>
</a>
<a href="游戏详情.html" class="ranking-content__list">
<p class="l">2</p>
<div class="c">
<img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
<div class="c-info">
<p class="c-title">车祸模拟器</p>
<span class="c-score">9.2</span>
</div>
</div>
<div class="btn">启动</div>
</a>
<a href="游戏详情.html" class="ranking-content__list">
<p class="l">3</p>
<div class="c">
<img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
<div class="c-info">
<p class="c-title">车祸模拟器</p>
<span class="c-score">9.2</span>
</div>
</div>
<div class="btn">启动</div>
</a>
<a href="游戏详情.html" class="ranking-content__list">
<p class="l">4</p>
<div class="c">
<img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
<div class="c-info">
<p class="c-title">车祸模拟器</p>
<span class="c-score">9.2</span>
</div>
</div>
<div class="btn">启动</div>
</a>
<a href="游戏详情.html" class="ranking-content__list">
<p class="l">5</p>
<div class="c">
<img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
<div class="c-info">
<p class="c-title">车祸模拟器</p>
<span class="c-score">9.2</span>
</div>
</div>
<div class="btn">启动</div>
</a>
<a href="游戏详情.html" class="ranking-content__list">
<p class="l">6</p>
<div class="c">
<img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
<div class="c-info">
<p class="c-title">车祸模拟器</p>
<span class="c-score">9.2</span>
</div>
</div>
<div class="btn">启动</div>
</a>
<a href="游戏详情.html" class="ranking-content__list">
<p class="l">7</p>
<div class="c">
<img class="c-pic" src="https://img.d1xz.net/d/2022/04/625ec6337d3b9.png" alt="" />
<div class="c-info">
<p class="c-title">车祸模拟器</p>
<span class="c-score">9.2</span>
</div>
</div>
<div class="btn">启动</div>
</a>
</div>
<p class="m-loading" id="rankingListMore"><span>加载中...</span></p>
</div>
js
// 排行列表-滚动加载
isRankingList() {
let rList = $("#rankingList"); //列表
if (!rList.length) return false;
let ajaxLock = 1; //ajax锁
let rListMore = $("#rankingListMore"); //加载更多
let thisPage = rList.data('page') + 1 || '2'; //第1页默认输出，所以从2开始
let limit = rList.data('limit') || "7"; //条数，默认50条
//自定义属性所有的参数
// let parm = rList.data();
// parm.page = (parm.page+1)*1 ||"2"; //第1页默认输出，所以从2开始
let url = null;
let parm_data = null;
if (rList.find('a').length < 7) { //判断列表长度小于50时
rListMore.html('———— 到底了哦 ————');
} else {
//滚动到底部
$(window).scroll(function () {
let windowH = $(window).height(); //设备可见区域高度
let documentH = $(document).height(); //整个网页的高度（包括未显示的部分）
let scrollH = $(window).scrollTop(); //滚动条滚动上去的高度
if (windowH + scrollH + 60 >= documentH) {
if (!ajaxLock) return;
ajaxLock = 0;
url = 'http://toolapi2.dev.txsdk.com/chaqijia/v1/config/all.html';
parm_data = {
page: thisPage,
limit: limit,
}
$.ajax({
url: url,
data: parm_data,
type: 'get',
success: function (res) {
// 自定义res.data假数据
res.data = [{
id: 1000,
sort: 8,
pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
title: '闪玩',
fen: '9.9'
},
{
id: 1001,
sort: 9,
pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
title: '游戏百变',
fen: '9.2'
},
{
id: 1002,
sort: 10,
pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
title: '游戏百变',
fen: '9.1'
},
{
id: 1003,
sort: 11,
pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
title: '游戏百变11',
fen: '9.1'
},
{
id: 1004,
sort: 12,
pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
title: '游戏百变12',
fen: '9.4'
},
{
id: 1005,
sort: 13,
pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
title: '游戏百变13',
fen: '9.6'
},
{
id: 1006,
sort: 14,
pic: 'https://img.d1xz.net/d/2022/04/625ec6337d3b9.png',
title: '游戏百变14',
fen: '9.3'
}
]
if (res.data.length >= limit) {
let rhtml = ''
ajaxLock = 1;
let arrData = res.data;
console.log("arrData", arrData)
for (var i = 0; i < arrData.length; i++) {
rhtml = `<a href="游戏详情.html" class="ranking-content__list">
<p class="l">${arrData[i]['sort']}</p>
<div class="c">
<img class="c-pic" src="${arrData[i]['pic']}" alt="${arrData[i]['title']}" />
<div class="c-info">
<p class="c-title">${arrData[i]['title']}</p>
<span class="c-score">${arrData[i]['fen']}</span>
</div>
</div>
<div class="btn">启动</div>
</a>`
rList.append(rhtml);
thisPage++;
rListMore.html("<span>加载中....</span>");
}
} else {
rListMore.html('———— 到底了哦 ————');
}
}
});
};
});
}
},
标签：sort,滚动,title,fen,列表,let,data,9.2,加载 来源： https://www.cnblogs.com/ada66/p/16170985.html