复制代码即可使用
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOCK.js 下拉无限滚动</title>
</head>
<style>
/* *::-webkit-scrollbar {
display: none;
width: 0px;
height: 0px;
} */
.flex-fsfs {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.r-wrap {
flex-flow: row wrap;
}
.p10 {
padding: 10px;
}
.mb10 {
margin-bottom: 10px;
}
.d-n {
display: none;
}
.text-hidden {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.listContainer {
padding-top: 20px;
height: 100vh;
overflow-y: scroll;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.c9 {
color: #999;
}
.m10 {
margin: 10px;
}
/* 之前的 */
.flex {
display: flex;
align-items: center;
flex-wrap: wrap;
}
img {
width: 100%;
}
.column {
flex-direction: column;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
.p10 {
padding: 10px;
}
</style>
<body class="bg-ff">
<div class="listContainer">
<div class="mainBox flex-fsfs r-wrap" id="main"></div>
<div class="noData flex-center c9">已经到底啦</div>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock.js"></script>
<script>
var tag = 1;
var pageNum = 1; // 当前页码
var pageSize = 10; // 当前每页条数
var pageCount = 18; //总页数
var winH = $('.listContainer').height(); //页面可视区域高度
var p = 0,
t = 0; // 顶部和底部的距离
$(function () {
request(); //初始获取数据，加载数据事件
//鼠标滚动事件
$('.listContainer').scroll(function () {
var pageH = $('#main').height(); //当前文档总高度
var scrollT = $('.listContainer').scrollTop(); //滚动条top的值
var bottomH = (pageH - winH - scrollT) / winH; // 当前所滚动位置到底部距离
p = $(this).scrollTop(); //顶部距离
// console.log(t <= p, t, p, t - p)
if (t <= p) { // 判断是否下滚
if (bottomH < 0.01 && tag == 1) {
tag++
if (pageNum !== pageCount) {
t = p;
pageNum++;
getData();
} else { //没有数据
$(".nodata").removeClass('d-n');
}
}
}
// setTimeout(function() {}, 2000); //延时2秒
});
})
function getData() {
console.log(pageNum);
var html = '';
setTimeout(() => {
tag--
request()
}, 500)
}
function request() {
// let paramJson = { "content": "", "orderBy": "[OrderIndex] DESC,[CreateTime] DESC", "pageSize": "20", "pageIndex": pageNum, "categoryId": "", "labelId": "", "brandId": "", "dbkey": "UDenDB_huanqiu", "customerId": "abf8cb62-b8e4-4731-984d-441eefd79337", "productIdStr": "", "isStock": "0", "isPack": "true", "imgHash": "", "isSeachCount": "false", "IsSeachNoStartSalesPresell": true }
let paramJson = { "content": "", "orderBy": "[OrderIndex] DESC,[CreateTime] DESC", "pageSize": "20", "pageIndex": pageNum, "categoryId": "5124215140177178044", "labelId": "", "brandId": "", "dbkey": "UDenDB_huanqiu", "customerId": "abf8cb62-b8e4-4731-984d-441eefd79337", "productIdStr": "", "isStock": "0", "isPack": "true", "imgHash": "", "isSeachCount": "false", "IsSeachNoStartSalesPresell": true }
$.ajax({
url: 'https://dhbwsapi2.dinghuovip.com/UDenWebService.asmx/GetProductPageUserList', // ajax请求要请求的地址
type: "get", // 请求的类型 get post
data: { paramJson: JSON.stringify(paramJson) }, // 请求要发送的数据 常在post请求中使用，get请求只需要拼接请求的url就可以
success: function (res) {
let data = JSON.parse(res)
var str = '';
data.forEach((item, i) => {
if (item.OrderPrice <= 6000) {
str += `
<div class="w25">
<div class="flex column p10">
<img src="${'https://dinghuovip.com/' + item.ImgNameUrl + item.ImgName}" />
<span>${'￥' + item.OrderPrice}</span >
<span style="margin-top:10px">${'序号：' + (i + 1)
}</span >
</div>
</div >
`
}
})
$("#main").append(str);
},
error: function (error) {
console.log(error);
// 请求失败之后要执行的内容
}
})
}
</script>
