test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<style type="text/css">
.loading-parent {
margin: 20px auto;
height: 40px;
position: relative;
}
.hide {
display: none;
}
.loading {
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 2px;
border-radius: 1px;
box-shadow: 0 -12px 0 3px black, /*上*/
0 12px 0 1px #333, /*下*/
-12px 0 0 1px #333, /*左*/
12px 0 0 1px #333, /*右*/
-9px -9px 0 1px #333, /*左上*/
9px -9px 0 2px #333, /*右上*/
-9px 9px 0 1px #333, /*左下*/
9px 9px 0 1px #333/*右下*/
;
animation: loading 2s linear 0s infinite;
-webkit-animation: loading 2s linear 0s infinite;
-o-animation: loading 2s linear 0s infinite;
-moz-animation: loading 2s linear 0s infinite;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes loading {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr ng-repeat="x in records track by $index">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
<!-- loading -->
<div class="loading-parent" ng-class="{hide:hideLoading}">
<div class="loading"></div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $window) {
$scope.hideLoading = true;
$scope.records = [{
"Name": "Alfreds Futterkiste",
"Country": "Germany"
}, {
"Name": "Berglunds snabbk",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico"
}, {
"Name": "Ernst Handel",
"Country": "Austria"
}, {
"Name": "Alfreds Futterkiste",
"Country": "Germany"
}, {
"Name": "Berglunds snabbk",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico"
}, {
"Name": "Ernst Handel",
"Country": "Austria"
}, {
"Name": "Alfreds Futterkiste",
"Country": "Germany"
}, {
"Name": "Berglunds snabbk",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico"
}, {
"Name": "Ernst Handel",
"Country": "Austria"
}, {
"Name": "Alfreds Futterkiste",
"Country": "Germany"
}, {
"Name": "Berglunds snabbk",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico"
}, {
"Name": "Ernst Handel",
"Country": "Austria"
}];
var tempData = [{
"Name": "1",
"Country": "test1"
}, {
"Name": "2",
"Country": "test2"
}, {
"Name": "3",
"Country": "test3"
}, {
"Name": "1",
"Country": "test1"
}, {
"Name": "2",
"Country": "test2"
}, {
"Name": "3",
"Country": "test3"
}, {
"Name": "1",
"Country": "test1"
}, {
"Name": "2",
"Country": "test2"
}, {
"Name": "3",
"Country": "test3"
}, {
"Name": "1",
"Country": "test1"
}, {
"Name": "2",
"Country": "test2"
}, {
"Name": "3",
"Country": "test3"
}, {
"Name": "1",
"Country": "test1"
}, {
"Name": "2",
"Country": "test2"
}, {
"Name": "3",
"Country": "test3"
}];
$window.onscroll = function() {
clients = $window.innerHeight || $window.document.documentElement.clientHeight || $window.document.body.clientHeight;
scrollTop = $window.document.documentElement.scrollTop;
wholeHeight = $window.document.documentElement.scrollHeight;
if (clients + scrollTop >= wholeHeight) {
$scope.hideLoading = false;
console.log("我到底部了");
setTimeout(() => {
$scope.records.push(...tempData);
$scope.$apply();
$scope.hideLoading = true;
}, 1000);
// Array.prototype.push.apply($scope.records, tempData);
}
}
});
</script>
</body>
</html>
效果貼不上來。。。自己運行吧