列表滚动加载（静态）
本地静态滚动加载
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('———— 到底了哦 ————'); } } }); }; }); } },
