PeachScript
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?
Are the items filled with the first screen? This component will trigger infinite event continuously until the scroll container display scroll bar.
Correct me if I am wrong. Even if I haven't scrolled (to bottom), this component will emit the infinite loading event. Right?
Because I want to trigger it only after user scrolls past the search results. Any hack ?
And can you explain what do you mean by "filled with first screen"?
I would like to share some observations.
On Entering the page, there is not much content. The scrollbar is at the bottom. So it triggers. To restrict that, I have used a v-if condition on the component to render it only when the search results (listData) are available. My expectation is that when the search results data(length 10) is available, it would be rendered to the view, hence the loading-component which is below the search results goes past the current viewport thereby not triggering the event. But on page enter, the loading event gets triggered twice and 30 search results are displayed rather than 10.
Below is my loading event method, which dispatches an action to increase the page number and then push the corresponding data to search results.
`
infiniteHandler($state){
let main = this ;
this.$store.dispatch('UPDATE_PAGE_NUMBER_ACTION')
.then((response)=> {
// console.log(' inside infiniteHandler event');
if(response){
setTimeout(function(){
main.$store.dispatch('PUSH_RESPONSE_DATA').then((response) => {
if(response){
$state.loaded();
}
else {
// console.log('........')
$state.complete();
}
})
})
}
else {
console.log('list data length < ');
$state.complete();
}
})
}
`
Hello @Rahulgans , thanks for your careful description, I try to create a minimal visible program but it cannot reproduce your problem, you can checkout it here and update it if I misunderstood your meaning.
Thanks for the response @peachscript. I have managed to eliminate the issue related to my first comment . What happens now is that once I have scrolled down to my 10th result, the loading event takes place as expected but it runs twice.
My guess is that since the retrieval of data from the API takes few seconds, the loading component which is still at the required minimum distance triggers the event again. Pardon me that I am not able to reproduce it in a live demo. Hope this issue is not a special case
I have same issue. In my case this happens after route change. Let's say we have route '/' (with sue infinite loading) and '/some-route' (with some other content). When the app loads with rout '/' everything is just fine, but when i navigate to '/some-route' and than back it starts triggering without scrolling to the bottom. My current workaround is
Hi @iamfrntdv . Can you share the relevant code? Will help debugging with what I know ;)
I tried to reproduce it here - https://github.com/iamfrntdv/vue-infinite-load-test but with no success. I tried to use it with vuex and may be I did it wrong way. Anyway now i'm using it without vuex and everything seems to work just fine.
I am using this in conjunction with graphql and firing a fetchMore inside the handler for the infinite event
My issue is that as the page loads, the event gets fired even though the initial data request to the server was not made yet, therefore it fails and throws an error.
I can try and put together a reproduction tomorrow
Would you be interested in a pull request that adds an option like this:
infinite-scroll-immediate-check | Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container.
Are the items filled with the first screen? This component will trigger infinite event continuously until the scroll container display scroll bar.
@PeachScript this behavior can cause unexpected action. for example, one list can be empty, but the event always trigger, and fall into an infinite loop.
i do not think it is good
@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 thanks for the explain. i understand. just do as you said. i think you can add this explain to the document
@sunchenguang you're welcome. Thanks for your suggestion, I've plan to create a FAQ section, will include this feature.
Is it norma behaviour that the initial load is also done by this plugin? This doesn't seem to be working for me.
@notflip if you want to fill up your first screen in a manual way, you can initialize this plugin after list data responded, via the v-if directive.
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.
