上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。
html
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class=‘ball-pulse‘>加载更多</div>
</body>
加入了css3动画loading效果；
css
<style type="text/css">
/*loading效果*/
@-webkit-keyframes scale {
0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }
80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
}
@keyframes scale {
0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }
80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
}
.ball-pulse > div:nth-child(1) {
-webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(2) {
-webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(3) {
-webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div {
background-color: #aaa;
width: 7px;
height: 7px;
border-radius: 100%;
margin: 2px;
display: inline-block; }
.ball-pulse{text-align: center;color:#aaa;background:#EDF4F4; font-size:16px;height:1.5rem;line-height: 1rem;}
body,html,ul,li{padding:0;margin:0;}
ul li{height:4.5rem;background:#ccc;border-bottom:2px solid #aaa;
list-style: none;}
</style>
js部分：
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
/****************** 滚动上拉下拉加载 ***************/
$(document).on("scroll",function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
if ($(".ul li").length == 10) {
$(".ball-pulse").html("已经到底了！")
}else{
if (scrollTop + windowHeight == scrollHeight ) {
//console.log("我到底部了");
setTimeout(getmore,600)
function getmore(){
$(".ball-pulse").html("<div></div><div></div><div></div>")
setTimeout(function(){
$(".ball-pulse").html("加载更多")
$("ul").append("<li></li><li></li><li></li>") },1000) } } } }); }) </script>
当然我们也可以在加载的时候做下js判断，如果数据加载完毕，loading显示“已经到底了！”，这就看我们自己的发挥了，这个demo更适用于移动端页面使用，希望能帮助大家。
时间： 2024-10-12 20:39:45