Hello!
I am a student and studying framework7.
I’m trying to use infiniti scroll, oh it works wrong.
I get all the data of the list instead. Not parts.
In one second I get several requests with different offsets.
My code:
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">Infiniti blog</div>
</div>
</div>
<div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadMore">
<div class="item-overview">
<div class="block block-strong">
<div class="block-header"><h5>head 1</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 2</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 3</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 4</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 5</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 6</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 7</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 8</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 9</h5></div>
<div class="block-header">number</div>
</div>
<div class="block block-strong">
<div class="block-header"><h5>head 10</h5></div>
<div class="block-header">number</div>
</div>
</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({
url: 'http://site.ru/api/get_blogs?page=5&offset=' + self.lastItem,
method: "GET",
crossDomain: true,
success: function(response) {
var blog_obj = JSON.parse(response);
if (blog_obj.event == 'success') {
var html = '';
for (i = 0; i <= blog_obj.count; i++) {
html += '<div class="block block-strong">';
html += '<div class="block-header"><h5>' + blog_obj.articles[i].name + '</h5></div>';
html += '<div class="block-header"><h5>' + i + '</h5></div>';
html += '</div>';
}
$(self.$el).find('.item-overview').append(html);
} else {
app.infiniteScroll.destroy('.infinite-scroll-content');
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
}
});
self.lastItem += 10;
self.allowInfinite = true;
}
}
}
</script>
I recorded the queries in the database and see -
Why is this happening and how do I fix the code?
Thank you!