Force initial loading when not at distance

[JeanLucEsser]

I have a page such as the distance from the bottom is too high by default to trigger the infinite scrolling. Is there a way to force initial loading of elements independent from the distance?

Imagine the following layout where column 2 can be very tall and column 1 has the scrolling list:

*****************************************************
*                column 1                * column 2 *
*****************************************************
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*                                        *    xxx   *
*****************************************************

The only way I see to load the list is to go to the bottom of the page (the scroll parent). It will then fill the page if it is very tall, no problem. The issue is the first (initial) loading.

The solution would be the option to fill the page on load without relying on the distance parameter. Something akin to "Always fill the page on load, whatever the distance".

Another (better?) solution would be to rely on the viewport. If the viewport is empty, fill it. Not sure this is possible though.

Am I missing something obvious here to trigger onInfinite() on page load? Firing onInfinite() on Vue instantiation mounted event won't work well as the spinner won't show and in some cases (short page) onInfinite() will be called twice.

[PeachScript]

Is this the same issue #21 ?

[JeanLucEsser]

Kind of, it's what I meant in my comment of that issue.
The issue you are referring to dealt with filling up a full page (load until page is full).

But what is missing is the ability to auto fire the first load even if the distance from bottom has not been reached. I think that it has not been implemented in issue #21. Or did I miss a property?

[PeachScript]

I guess you need a spinner as the loading animation, is that right?

If so you're right, this component does not has this feature. But I cannot imagine the application scenario you said, is it out of the category of infinite scroll?

[JeanLucEsser]

No that's not what I need. I need a function or a way to manually start loading the first batch of items. Currently the first batch of items is triggered in the same way as when we scroll: distance from bottom is less than a given value. In a desktop application, there may be situations where that condition cannot be met on page load.

Take your hacker news example: Translate it to a desktop app. Add an aside column that has a 5000px height. Now your items won't load in your main column unless you scroll to the bottom of the page to trigger it.

Other example: imagine you do not want to load your items unless you ask for it. How would you 1/ prevent loading on page load and 2/ trigger loading with a "load results" button?

I'm going to try and take some time to code an example so you understand my issue.

[PeachScript]

I have already understood, thanks a lot!

There has two columns in the page, and you want to load more data for the left page, but due to the right page is too high lead to the distance lager than the edge value, but the component cannot resolve it, I wrote a demo on JSFiddle, is that your meaning?

[JeanLucEsser]

Yes that's it.

I tried to add:

        mounted: function() {
            this.onInfinite();
        },

But there are two issues. First, when called this way, the function does not trigger the loading animation. Second, if my right column is empty (not 5000px), the function gets called twice, once on mounted, once by default.

Plus it doesn't answer the case where I need to manage loading items manually.

What I think could make sense is the following:

• a property autoLoadFirst=true
  // is loading the first results automatic or triggered via a "load" button (or programmatically)
  // this loading mechanism MUST NOT be based on the distance parameter
• a property autoLoadMore=true
  // is loading more results automatic or triggered via a "load more" button (or programmatically)
• a property autoFillPage=true
  // load more results automatically until the page height is full

What do you think?

[PeachScript]

Okay, I need time to think about it.

[JeanLucEsser]

Sure do not hesitate to share your reflexions!

[PeachScript]

Hi @JeanLucEsser, sorry to late, I have been improved the way to calculate distance and released v1.3.2(Vue.js1) and v2.0.3(Vue.js2) to fix this issue, you can try it now. Please tell me if it still has problem :P

[PeachScript]

@JeanLucEsser is your problem solved?

[JeanLucEsser]

@PeachScript yes after a few tests, the problem appears to be fixed, thank you very much. I still think some options to manually trigger loading should be nice but the main issue is now fixed so that's a good thing. ;)

[PeachScript]

That's good, thanks for your idea, and I also believe my own ideas like you. :P

Best regards.