Restricting infinite load event on page enter
See original GitHub issueVersion
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:
- Created 5 years ago
- Reactions:5
- Comments:17 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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:
@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.