vue-infinite-loading: Restricting infinite load event on page enter

Version

V2.2

Vue.js version

Vue 2.5.x

What is expected?

There will be a search event on the page/route enter which displays some results (listingbuy component) which is a vuex action. I want to trigger infinite loading after scrolling those results. The infinite loading component is made available only when there are search results. On scrolling, I increase the page number to push the new search results.

                <listing-buy`  v-for="(buyItem,index) in listData" :key="buyItem.id" 
  			:searchListingBuy="buyItem" 
  			v-if="buyItem.category ==2"
  			:indexForPageNumber="index+1">
  		</listing-buy> 

	  	<div class="col-12 col-sm-10 offset-sm-1 d-flex justify-content-center">
	  		<infinite-loading 
	  			:distance='200'
	  			ref="infiniteLoading"
	  			v-if="listData.length > 0"
	  			 @infinite="infiniteHandler"
	  			:spinner='"spiral"'>
	  		</infinite-loading>
	  	</div>

What is actually happening?

Currently, on page/route enter, the infinite loading event is triggered even if I have not scrolled to the bottom. This causes the page number to change. I am not sure how to proceed. Any workaround?. I read about the reset event. Not sure how to use it.

How to reproduce this problem?

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 5
Comments: 17 (5 by maintainers)

Most upvoted comments

having the same issue handler being fired on page enter, but in some unusual way it wont get fired when navigating between routes. i was pretty sure at the beginning of working with the plugin, that this is how it works in order to fetch the first data from the api.

if i understand you right guys you suggest:

fetching the data on component mounted. -setting the v-if to the plugin in order to render it only after first data was fetched.

michaelAkrawi on Apr 3, 2019

@sunchenguang if you want to enable this component manually, try the v-if to control it. If your list has no data, just finish this infinite load via $state.complete. The auto fill up feature is very useful for the responsive applications, to fill up the first screen of different devices, on the other hand, it is more accord with our intuition.

PeachScript on Jan 22, 2019