标签：sort 滚动 title fen 列表 let data 9.2 加载
本地静态滚动加载
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。