component triggered right away then never again

[packytagliaferro]

I load in a bunch of content via php (about 45 objects) and when the page loads it will load the first 6 as i wanted, but then before I even scroll it will load another 6 (which it should do on scroll). Then if I scroll to the bottom it never loads anymore content.

Does having a footer on the page effect any of this?

<div class="wrap-content" id="home">

    <div class="container">
        <h1>Tips</h1>
        <h2>Inspiration comes from everywhere.</h2>

        <ul id="tip-list" class="item-list">

            <li v-for="item in list">
                <p class="tag-name">{{ item.tags[0].tag_name }}</p>
                <div class="actions-container"></div>
                <p class="tip">"{{ item.content_stringoption1 }}"</p>
            </li>

            <infinite-loading :on-infinite="onInfinite" :distance="distance"  spinner="waveDots" ></infinite-loading>

        </ul>

    </div>

</div>


<script type="text/javascript">

    var data = <?php echo json_encode( $content ) ?>;

    $(document).ready(function() 
    {
        new Vue({
            el: '.item-list',
            data: {
                distance: 10,
                list: []
            },
            ready: function () 
            {
                for (var i = 0; i < 6; i++) 
                {
                    this.list.push( data[i] );
                }
            },
            methods: {
                onInfinite: function () 
                {
                    setTimeout(function () 
                    {
                        var temp = [];
                        for (var i = this.list.length; i <= this.list.length + 5; i++) {
                            temp.push( data[i] );
                        }

                        this.list = this.list.concat(temp);
                        this.$broadcast('$InfiniteLoading:loaded');
                    }.bind(this), 1000);
                }
            }
        })

    });

</script>

[PeachScript]

I tried to run your code on the JSFiddle, it works when I set the first load count to 10.

Because of this plugin base on the scroll event, it will judge the distance and call the on-infinite function when the scroll event be triggered, and only the scroll event be triggered. But in this problem, the content that first loaded cannot overflow the parent container and the scroll bar doesn't display, so this plugin cannot received any scroll event to judge the distance.

And one more thing, when you initialize the InfiniteLoading component, it will judge the distance and call the on-infinite function once after initialize, it means you needn't load content manually in the ready hook function. It's my fault, I wrote a bad usage in the GitHub Pages, and I will correct it.

Hope can help you!

[packytagliaferro]

Thanks for the info, but I still cant get it to work on my site. I understand what you are saying, but the content (with 6) already spills outside the browser window so there is a scroll bar but it still loads the event once, then if I scroll to the bottom it never runs again. I get no errors. Does running in document.ready have something to do with it?

[PeachScript]

You're welcome.

So it is, I couldn't find the reason base on the current informations, maybe the following informations can help us to find the reason:

• Your browser and version
• The CSS and more key code
• The Vue.js version you are using

By the way, does the JSFiddle above works properly in your place?

[packytagliaferro]

Nope, I put the fiddle code in and didnt work on my setup but works in the fiddle fine.

I am using:

Chrome: 53.0.2785.116 (64-bit)
Vue.js : https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js

The list items form a grid of 3 across. Most elements dont have any CSS attached to them, but I put the ones that did below.

html:

<div class="wrap-content" id="home">

    <div class="container">
        <h1>Tips</h1>
        <h2>Inspiration comes from everywhere.</h2>

        <ul id="tip-list" class="item-list">

            <li v-for="item in list">
                <p class="tag-name">{{ item.tags[0].tag_name }}</p>
                <div class="actions-container"></div>
                <p class="tip">"{{ item.content_stringoption1 }}"</p>
            </li>

            <infinite-loading :on-infinite="onInfinite" :distance="distance"  spinner="waveDots" ></infinite-loading>

        </ul>

    </div>

</div>

CSS:

body {
    min-height: 100vh;
    color: #277FBD;
    font-size: 1em;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
}
.wrap-content {
  padding: 0.625em 0.625em; }
  @media screen and (min-width: 480px) {
    .wrap-content {
      padding: 0.625em 2.5em; } }
  @media screen and (min-width: 1005px) {
    .wrap-content {
      padding: 0.625em 5em 3.75em; } }
  @media screen and (min-width: 1400px) {
    .wrap-content {
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto; }
      .wrap-content::after {
        clear: both;
        content: "";
        display: block; } }


.item-list li {
  background: #E8E8E8;
  background-size: cover !important;
  background-position: center !important;
  border: 4px solid #fff;
  margin-top: 1.875em;
  padding: 1.875em;
  position: relative;
  min-height: 21.875em; }
  @media screen and (min-width: 480px) {
    .item-list li {
      float: left;
      display: block;
      margin-right: 2.5641%;
      width: 31.62393%; }
      .item-list li:last-child {
        margin-right: 0; } }

@media screen and (min-width: 480px) {
  .item-list li:nth-child(3n) {
    margin-right: 0; } }

[PeachScript]

I used the same browser, jQuery 2.x and the same version of Vue.js, but your code works properly in my browser, it's very strange. Most of the time, the reason always at the inconspicuous place, the data were obtained from php code, are they properly?

[packytagliaferro]

Ya, I am not sure. I changed it to get the data from an API like Hacker news and it still wont work. Gets the data but scroll is not triggering anything

[packytagliaferro]

So I can get it to work but only if I make container position:absolute; then it will scroll and load. Should I set the Vue Element to something else besides the list ul? Maybe body?

[PeachScript]

Although it maybe cannot solve this problem, but I also think you should create a wrapper element for ul and InfiniteLoading and set it as the Vue Element, then put the InfiniteLoading below the ul tag, because the ul tag only contain the li tag.

[PeachScript]

Is there something special in your setup?

[packytagliaferro]

I got it. The parent element of page was set to overflow:auto. If you have that on any parent element of the target element the scroll event will not trigger.

[PeachScript]

Yep, this plugin will find a scrollable parent element and listen scroll event on it, if not found, it will listen scroll event on window, source code is here.

So...I don't understand why you need set a scrollable parent element to solve it, is there any details I didn't thought?

[packytagliaferro]

It looks like since I put overflow:auto on the the #page container no scrolling will be detected by any child elements. So when your plugin looked for a parent element if found container, which was fine since it didn't have any css that wouldn't allow scroll events, but containers parent of page had no scroll events, so container didn't either.

[PeachScript]

Thanks, through your description, I found two new situations that caused this plugin did not working:

Situation 1, some parent container has overflow: auto style but doesn't has any style like height, so the parent container never display a scroll bar and this plugin cannot listen scroll event successfully on it. See the JSFiddle, I set overflow: auto for .wrap-content, it cannot working properly.

Situation 2, some parent container has overflow: auto style and has height style, but I set the distance less than the value of vertical padding, I cannot scroll to the effective distance forever, so it also cannot working properly. See the JSFiddle, when I set the distance greater or equal to 20px, it working properly because the padding: 0.625em 2.5em convert to pixel is padding: 10px 40px base on font-size: 16px of root element.

It's so funny! I think I should to improve the second situation, "Don't make user think" : )

[packytagliaferro]

Nice. Glad I could help.

One a side note, when you do this

changeFilter() {
this.list = [];
this.$nextTick(() => {
this.$broadcast('$InfiniteLoading:reset');
});
},

if you have a stagger transition on your for item like v-for="item in list" transition="bounce" stagger="100" the data will not auto reload on change like your demo, you must scroll