question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Restricting infinite load event on page enter

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:5
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
michaelAkrawicommented, Apr 3, 2019

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.
1reaction
PeachScriptcommented, Jan 22, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Something blocking load event? - Stack Overflow
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, ...
Read more >
Page just keeps loading - Codecademy
I entered a code and went back to check the syntax. ... an infinite loop at the moment the display attempts to parse...
Read more >
Infinite Scrolling, Load More and Next Click Pagination in Web ...
Scroll down to find the Pagination section and enable the pagination switch · Select the pagination type : Click · Enter the Next...
Read more >
Implementing infinite loading in an Angular store application
Infinite loading is implemented using scroll listeners that monitor the user's position on the page, triggering events when the user reaches ...
Read more >
Scrolling - The Modern JavaScript Tutorial
But we can prevent scrolling by event.preventDefault() on an event that causes the scroll, for instance keydown event for pageUp and pageDown ....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found