Load Data while Scrolling Page Down with VueJS AJAX

Load Data while Scrolling Page Down with VueJS AJAX

In this Post We Will Explain About is Load Data while Scrolling Page Down with VueJS AJAX With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Load data while Scrolling Page down with vuejs Example

In this post we will show you Best way to implement Infinite Vue.js Scroll, hear for simple infinite scroll example using Vue.js with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Getting Started for Infinite Vue.js Scroll

We have used CDN(libes) for vuejs so you must need Your internet Data connection for them to work on simple infinite scroll example using Vue.js in load data while scrolling page down with Vuejs and PHP MySQLi.

Also Read :   How to store dynamic array values using Angularjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Load data while Scrolling Page down with vuejs) dependencies and the HTML Elements that we have created.

//Load data while Scrolling Page down with vuejs
<div class="live24u heading">
  <h1>vuejs Infinite Scroll</h1>
  <h4>Load Data while Scrolling Page Down with VueJS AJAX and PHP</h4>
</div>

<div class="live24u container" id="live24uApp">
  
  <div class="live24u list-group-wrapper">
    <transition name="fade">
      <div class="live24u infiniteloading" v-show="infiniteloading">
        <span class="live24u fa fa-spinner fa-spin"></span> Loading
      </div>
    </transition>
    <ul class="live24u list-group" id="infinite-product-list">
      <li class="live24u list-group-product" v-for="product in products" v-text="product"></li>
    </ul>
  </div>
  
</div>

index.js

This contains our simple custom index.js files Add Like as javascript, vuejs scripts

Also Read :   Vuejs Examples - Vuejs examples for beginners - application Vuejs 2

//Load data while Scrolling Page down with vuejs
new Vue({
  el: '#live24uApp',
  data: {
    infiniteloading: false,
    nextProduct: 1,
    products: []
  },
  mounted () {

    const itemList = document.querySelector('#infinite-product-list');
    itemList.addEventListener('scroll', e => {
      if(itemList.scrollTop + itemList.clientHeight >= itemList.scrollHeight) {
        this.getMoreData();
      }
    });


    this.getMoreData();

  },
  methods: {
    getMoreData () {     
      this.infiniteloading = true;
      setTimeout(e => {
        for (var i = 0; i < 20; i++) {
          this.products.push('Live24u ' + this.nextProduct++);
        }
        this.infiniteloading = false;
      }, 200);
      
    }
  }
});

style.css

Last step, we have add the Following CSS styles for our simple Load data while Scrolling Page down with vuejs and our Custom styling.

$cardred: #c60000;

body {
  background-color: $cardred;
  padding: 50px;
}
.container {
  padding: 40px 80px 15px 80px;
  background-color: #FFFFFF;
  border-radius: 8px;
  max-width: 800px;
}
.heading {
  text-align: center;
  h1 {
    background: -webkit-linear-gradient(#FFFFFF, #999);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-align: center;
    margin: 0 0 8px 0;
    font-weight: 900;
    font-size: 4rem;
    color: #FFFFFF;
  }
  h4 {
    color: lighten(#5c3d86,30%);
    text-align: center;
    margin: 0 0 35px 0;
    font-weight: 400;
    font-size: 24px;
  }
}

.list-group-wrapper {
  position: relative;
}
.list-group {
  overflow: auto;
  height: 50vh;
  border: 3px solid #cdcd4d;
  border-radius: 8px;
}
.list-group-product {
  margin-top: 1px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 3px solid #cdcd4d;
}
.infiniteloading {
  text-align: center;
  position: absolute;
  color: #3f3f3f;
  z-index: 9;
  background: $cardred;
  padding: 8px 18px;
  border-radius: 8px;
  left: calc(50% - 45px);
  top: calc(50% - 18px);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}

Infinite Vue.js Scroll

Also Read :   PHP program to print patterns of numbers and stars

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Load data while Scrolling Page down with vuejs And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.