Vue implements an example of pulling down and scrolling to load data

npm install vue-infinite-loading --save

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: { InfiniteLoading }
}

<template>
  <div> <p v-for="item in list"> <span v-text="item"></span> </p> <!--The infinite-loading component should be placed at the bottom of the list, inside the scrolling box! --> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div></template><script> import InfiniteLoading from 'vue-infinite-loading';

  export default {
    data() {
      return {
        list: []
      };
    },
    methods: {
      infiniteHandler($state) {
        // Here simulates a loading delay of 1 second setTimeout(() => {
          let temp = [];
          for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
            temp.push(i);
          }
          this.list = this.list.concat(temp);
          $state.loaded();
        }, 1000);
      },
    },
    components: { InfiniteLoading }
  }</script>

<template>
    <div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
        </ul>
        <infinite-loading @infinite="infiniteHandler">
            No more Data
        </infinite-loading>
    </div>
</template>    

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import axios from 'axios';

    export default {
          data() {
            return {
                  list: []
            };
          },
          methods: {
            infiniteHandler($state) {
                let api="http://xxx.com/xxx";
                //api requests data address for you axios.get(api, {
                    params: {
                        // Page number parameters (10 per page)
                          page: this.list.length / 10 + 1,
                    },
                  }).then((response) => {
                    if (response.data.length) {
                        // response.data is the array list returned by your request interface this.list = this.list.concat(response.data);
                          $state.loaded();
                          if (this.list.length / 10 === 10) {
                              // Here 10 pages of data are loaded, and the setting is not to load anymore $state.complete(); 
                          }
                    } else {
                          $state.complete();
                    }
                  });
            }
          },
          components: { InfiniteLoading }
    };
</script>

<template>
    <div class="hacker-news-list">
          <div class="hacker-news-header">
            <!--Pull down to change-->
            <select v-model="tag" @change="changeFilter()">
                  <option value="story">Story</option>
                  <option value="history">History</option>
            </select>
              <!--Or click to change-->
            <button @click="changeFilter()">Search</button>
          </div>
          <ul>
              <li class="hacker-news-item" v-for="(item, key) in list"></li>
           </ul>
           <!--Don't forget to set this ref="infiniteLoading"-->
          <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            No more data
          </infinite-loading>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import axios from 'axios';

    export default {
          data() {
            return {
                  list: [],
                  tag: 'story',
            };
          },
          methods: {
            infiniteHandler($state) {
                  const api="http://xxx.com/xxx";
                  //api requests data address for you axios.get(api, {   
                    params: {
                        // Changed conditional parameters tags: this.tag,  
                          page: this.list.length / 10 + 1,
                    },
                  }).then(({ data }) => {
                    if (data.result.length) {
                          this.list = this.list.concat(data.result);
                          $state.loaded();
                          if (this.list.length / 20 === 10) {
                            state.complete();
                          }
                    } else {
                          $state.complete();
                    }
                  });
            },
            //Change the conditional bar using this method changeFilter() {
                  this.list = [];
                  this.$nextTick(() => {
                    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
                  });
            },
          },
          components: { InfiniteLoading }
    }
</script>