Skip to content

Instantly share code, notes, and snippets.

@jeffreyvr
Created December 21, 2017 09:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffreyvr/87309575bccebfb46256cbf02e841f6d to your computer and use it in GitHub Desktop.
Save jeffreyvr/87309575bccebfb46256cbf02e841f6d to your computer and use it in GitHub Desktop.
Framework7 Infinite scroll
<template>
<div class="page">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="fa fa-user-o" aria-hidden="true"></i>
</a>
</div>
<div class="title sliding brand "><img src="images/logo.jpg"> <span>MyApp</span></div>
<div class="right">
<a href="#" class="link icon-only panel-open" data-panel="right">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadMore">
<div class="item-overview list-block">
{{#each items}}
<div class="{{#compareIndex @index "0"}} item-summary-large item-summary {{else}} item-summary {{/compareIndex}}" data-index="{{@index}}">
<div class="item-details">
<span class="title">{{title.rendered}}</span>
</div>
<div class="item-image" style="background-image:url({{thumbnail_image_url}});"></div>
<a class="item-anchor" href="/item/{{id}}/"></a>
</div>
{{/each}}
</div>
<div class="preloader infinite-scroll-preloader"></div>
</div>
</div>
</template>
<script>
return {
data: function () {
return {
allowInfinite: true,
lastItem: 10,
}
},
methods: {
loadMore: function () {
var self = this;
var $ = self.$$;
if (!self.allowInfinite) return;
self.allowInfinite = false;
app.request({
beforeSend: function ( xhr ) {
xhr.setRequestHeader( 'authorization', localStorage.getItem('baseAuthentication') );
},
url: apiurl + '/posts/?offset=' + self.lastItem,
dataType: 'json',
method: "GET",
crossDomain: true,
success: function(response) {
var html = '';
for (i = 0; i < response.length; i++) {
html += '<div class="item-summary">';
html += '<div class="item-details">';
html += '<span class="title">' + response[i].title.rendered + '</div>';
html += '</div">';
html += '<div class="item-image" style="background-image:url('+response[i].thumbnail_image_url+');"></div>';
html += '<a class="item-anchor" href="/item/'+response[i].id+'/"></a>';
html += '</div>';
}
$(self.$el).find('.item-overview').append(html);
}
});
self.lastItem += 10;
self.allowInfinite = true;
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment