Vue scroll down to load more data scroll case detailed explanation

npm install vue-infinite-scroll --save

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in data" :key="item.index">{{item.name}}</div>
</div>

 data () {
    return {
      count: 0,
      data: [],
      busy: false
    }
  }

methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)
    }
  }

 setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)

npm install vue-scroller -d

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

<scroller style="top: 100px;" :height='400' :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
     <div class="order-box" v-for="(item,index) in orderList" :key="index">
                
     </div>
 </scroller>

data(){
           return {
                status:'all',
                orderList:[],
                page:0,
                all_page:1,
            }
        },

refresh (done) {
                setTimeout(()=>{
                    done();
                },1500)
            },

//Pull down to trigger infinite (done) {
                if(this.page>=this.all_page){
                    setTimeout(()=>{
                        this.$refs.myscroller.finishInfinite(true);
                    },1500)
                }else{
                    
                    setTimeout(()=>{
                        this.page++;
                        this.getorderList(done)
                        
                    },500);
                }
            },
 
getorderList(done){
                this.$http({
                    method:'post',
                    url:'/seckill/server/orderList',
                    data:{
                        jwt:this.jwt,
                        status:this.status,
                        page:this.page,
                        page_size:5
                    }
                }).then(res=>{
                    if(res.data.code == 0){
                        
                        
                        this.orderList.push.apply(this.orderList,res.data.data.list)
                        this.$refs.myscroller.finishInfinite(true)
 
                        this.page = res.data.data.page
                        this.all_page = res.data.data.all_page
                        done();
                    }else{
                       
                    }
                })
            },

goodsAll(){
                this.status = 'all'
                this.page = 0
                this.all_page = 1
                this.$refs.myscroller.finishInfinite(false);
                this.orderList = []
            },

npm install vue-infinite-loading --save

// Component class uses import InfiniteLoading from 'vue-infinite-loading';
 
export default {
  components: { InfiniteLoading }
}
 
//Use the basic version <infinite-loading
  spinner="spiral"
  @infinite="infiniteHandler"
  :distance="200"
  class="infinite-loading-wrap"
>
  <!-- <div slot="spinner">Loading...</div> -->
  <div slot="no-more">No more Data</div>
  <div slot="no-results">No results Data</div>
  <!-- <div slot="error" slot-scope="{ trigger }">
	Error Data, click <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="trigger">here</a> to retry
  </div> -->
</infinite-loading>

<template>
  <div>　
		    <p v-for="(item,index) in list" :key="index">　
			     <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
			spinner="spiral"
			@infinite="infiniteHandler"
			:identifier="infiniteId"
			:distance="200"
			class="infinite-loading-wrap"
		>
			<div slot="spinner">Loading...</div>
			<div slot="no-more">No more Data</div>
			<div slot="no-results">No results Data</div>
			<div slot="error" slot-scope="{ trigger }">
			  Error Data, click <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="trigger">here</a> to retry
			</div>
		</infinite-loading>　
	 </div>
</template>
 
<script>　
 import InfiniteLoading from 'vue-infinite-loading';
  export default {
    data() {
      return {
		  infiniteId: +new Date(), // reset scroll state change page: 1,
        list: []
      };
    },
    methods: {
		// Reset scroll state rest(){
		  this.list = [];
		  this.page = 1;
		  this.infiniteId += 1;
		},
      async infiniteHandler($state) {
			// Simulate request data const res = await this.$axios.workList({ page: this.page, pagesize: 20 });
			  if (res.data.list.length) {
				this.page += 1;
				this.list = this.list.concat(res.data.list);
				$state.loaded();
			  } else {
				$state.complete();
			  }
        // 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>

import { debounce } from "lodash"; // Anti-shake // Anti-shake get: debounce(async function () {
  let k = await this.$axios.getList_API();
  console.log(k, "Anti-shake version");
}, 1000),