vue-觸底加載更多

方法一：插件 vue-infinite-scroll

<template>
  <div>
    <div class="demo1" v-for="index of count" :key="index">
      demo
    </div>
    <div 
      v-infinite-scroll="loadMore" 
      infinite-scroll-disabled="busy" 
      infinite-scroll-distance="410">
    </div>
  </div>
</template>

<script>
// infinite-scroll-disabled控制是否
// infinite-scroll-distance 距離底部多少出發
import infiniteScroll from 'vue-infinite-scroll'
export default {
  name:'demo',
  data(){
    return{
      count:50,
      busy:false
    }
  },
  directives: {
    infiniteScroll
  },
  methods:{
    loadMore(){
      this.busy=true
      setTimeout(()=>{  
        this.count=this.count+50
        this.busy=false
      },2000)
    }
  }
}
</script>


<style lang="scss" scoped>
.demo1{
  height: 30px;
}
</style>

方法二：封裝一個方法

const scroll={
    isEnd:false,
    start(callback){
        let timer=null
        callback && window.addEventListener('scroll',()=>{
            if(timer){
                clearTimeout(timer)
            }
            //函數防抖動
            timer=setTimeout(()=>{
                //游覽器向上滾動的高度
                const scrollTop=document.documentElement.scrollTop
                //文檔真實的高度
                const scrollHeight=document.documentElement.scrollHeight
                //游覽器窗口（文檔）的可是高度，就是肉眼可見的那部分真實高度
                const clientHeight=document.documentElement.clientHeight
                if(!this.isEnd && scrollHeight===scrollTop+clientHeight){
                    window.scrollTo(0,scrollTop-100)
                    callback()
                }
            },300)
        })
    },
    end(){
        this.isEnd=true
    }
}

export default scroll

使用

import scroll from '@/utils/scroll.js';

scroll.start(this.getList)

 

方法三：在某個容器中觸底事件

document.getElementById('div').onscroll=()=>{ }