类似于:微博,空间和CSDN这种效果,刚开始显示出几条数据,鼠标滑动或者下拉滚动条时接着加载内容。怎么实现?
监听鼠标滚动事件,滚动条滚动事件,也有很多现成的ui组件库里有这个功能
1、首先接口要传pageIndex(页数)跟pageSize(一页几条信息)的字段,后端根据这个返回对应的数据
2、使用$("xxx").on('scroll', function (){})监听页面滚动事件,到底就触发请求接口,把pageindex跟pagesize等数据传给后端即可
先监听滚动事件,如果触底就去请示下一页
window.onscroll = function() {
var scrollTop = document.body.scrollTop;
var offsetHeight = document.body.offsetHeight;
var scrollHeight = document.body.scrollHeight;
if (scrollTop == scrollHeight - offsetHeight) {
page++;
loadList(page);
}
};
function loadList(page){
//请求下一页数据
}
可以通过js插件来实现,这个是插件网址(懒加载技术,即不看不加载,即时加载)
https://www.jq22.com/jquery-info11629
数据结构和分页是差不多的,当前页,总页码等
默认加载第一页page: 1
,触底page++
后请求,将数据push进去(加个loading判断,请求时不要再触发)page++
大于总页码,表示没有更多了