一.html
<ul class="new-list">
</ul>
<button>回到顶部</button>
二.css
*{
padding:0;
margin:0;
list-style:none;
}
a{
text-decoration: none;
}
.clearfix::after{
content: "";
clear: both;
display: block;
width:0;
height: 0;
}
.new-list,.btns{
width:500px;
margin:50px auto;
}
.new-list li{
border-bottom: 1px solid gainsboro;
padding:20px 0;
}
.new-list li:last-child{
border-bottom:none;
}
.new-list li img{
float: left;
width: 100px;
margin-right: 10px;
}
.news-dec p{
color:gainsboro;
}
button{
position: fixed;
bottom: 10px;
right: 10px;
background: red;
}
三.script
var pageNums=1;
getList(pageNums);
// 滚动条事件
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var windowHeight = $(this).height();
var scrollHeight = $(document).height();
// console.log(scrollTop+windowHeight);
// console.log(scrollHeight);
if(scrollTop+windowHeight>=scrollHeight){
pageNums++
getList(pageNums)
}
})
// 回到顶部按钮
$("button").click(function(){
$("html").animate({
"scrollTop":"0",
},1000)
})
//函数封装
function getList(pageNums){
$.ajax({
url:"https://api.apiopen.top/getWangYiNews",
method:"POST",
data:{
page:pageNums,
count:10,
},
success:function(res){
// console.log(res);
if(res.code===200){
// $(".new-list").html("");
for(var i=0;i<res.result.length;i++){
var item=res.result[i];
var str='<li class="clearfix">'+
'<img src="'+item.image+'" alt="断网了">'+
'<div class="news-dec">'+
'<h3>'+item.title+'</h3>'+
'<p>'+item.passtime+'</p>'+
'</div>'+
'</li>'
$(".new-list").append(str);
}
}
}
})
}