vue中实现简单的数据懒加载

最近因项目要求，前端需展示大量数据，学习并使用数据懒加载的方式来实现，页面是直接引入vue.js，做一个简单的分享

<div class="data">需要展示的数据<div>

1、设置样式

     div所在盒子需要设置高度，同时overflow:auto，确保该div盒子有滑块，否则滑动监听将失效

2、数据首次渲染

data: {
        list: [],//通过后台数据得到的所有数据
        showList: [],//前端页面需要渲染的数据
        pageSize: 40, //渲染数据的多少根据实际情况设置
        totall: 0, //总数据量
},
methods:{
    loadData(){
        for (let i = (this.pageSize-40); i < this.pageSize; i++) {
           if (this.totall >= this.list.length) return
           this.showList.push(this.list[i])
           this.totall++
      }
    }
},
created() {
      //首次进行数据渲染
      this.loadData()
 },

 3、进行滑动监听，并在页面销毁时移除监听

methods:{
    dataScroll(){
        //防抖函数
        this.debounce(this.scrollLoadData, 100)
    }
},
mounted() {
        document.querySelector('.data').addEventListener('scroll', this.dataScroll, true)
},
beforeDestroy() {
        document.querySelector('.data').removeEventListener('scroll', this.dataScroll)
},

4、防抖函数

computed: {
    debounce() {
      let timer = ''
      return function (func, wait) {
               let context = this
               if (timer) {
                  clearTimeout(timer)
               }
               timer = setTimeout(() => {
                  func.apply(context)
               }, wait)
              }  
    } 
}

5、滑动加载数据函数

methods:{
    scrollLoadData(){
        //获取滚动条的高度
        let scrollTop = document.querySelector('.data').scrollTop
        // 获取视口高度
        let windowHeight = window.innerHeight;
        //获取文档总高度
        let scrollHeight = document.querySelector('.data').scrollHeight
        //console.log(scrollTop,windowHeight,scrollHeight);
        //根据实际情况调整距离进行数据加载，这里暂定1000，加载的数量增加40
        if (scrollTop + windowHeight + 100 >= scrollHeight) { 
               this.pageSize += 40
               this.loadData()
           }
    }
}