1.0.5 • Published 8 years ago
scrolload v1.0.5
Scroll to load list item
Install
$ npm install scrolload --save
// or
$ bower install scrolloadUsage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrolload</title>
</head>
<body>
<div class="scrolload"></div>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="../node_modules/zepto/dist/zepto.min.js"></script> -->
<script src="../dist/scrolload.js"></script>
<script>
fetch('https://api.example.com/items')
.then(response => response.json())
.then(items => {
new Scrolload({
container: '.scrolload', // $('.scrolload')
count: 9, // per page
data: items,
tpl: function(item) {
return `
<div class="item">item ${item}</div>
`;
},
onLoading: function() {
$('.scrolload').append('<p class="loading">Loading...</p>');
},
onLoaded: function() {
$('.loading').remove();
},
onNoMore: function() {
$('.loading').text('No more data.');
},
});
});
</script>
</body>
</html>