[SOLVED] Infiniti scroll problem

1

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 - Screenshot_32

Why is this happening and how do I fix the code?

Thank you!

2

I think I understand what the problem is. I’m wrapping a string
self.allowInfinite = true;

Final code:

<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);
				            self.allowInfinite = true;
				            
		        		} else {

		        			app.infiniteScroll.destroy('.infinite-scroll-content');
						    // Remove preloader
						    $$('.infinite-scroll-preloader').remove();
						    return;

		        		}

		        	}
		        });
		        self.lastItem += 10;
	    	}
	    }
	}
</script>

Now it works well

3

thank u very much,i know why my code didn’t work…:轻松:

4

@hamsterL If you found a solution, it would be nice to post the outcome here, so others may benefit from the solution as well…

5

yes ,but it create other problem,so i want to solved it and show it :微笑:

6

this is my way。。。if u have any advice ，please message me:脸红: